/*
Copyright 2019 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

/* Hide UI icons on older browsers with SVG 1.1 implementations */
.spectrum--medium {
  .spectrum-UIIcon--large {
    display: none;
  }
  .spectrum-UIIcon--medium {
    display: inline;
  }
}

.spectrum--large {
  .spectrum-UIIcon--medium {
    display: none;
  }
  .spectrum-UIIcon--large {
    display: inline;
  }
}

/* Hide UI icons on browsers that implement SVG 2 correctly (Firefox 56+) */
.spectrum--large {
  x--ui-icon-large-display: block;
  x--ui-icon-medium-display: none;
}
.spectrum--medium {
  x--ui-icon-medium-display: block;
  x--ui-icon-large-display: none;
}

.spectrum-UIIcon--large {
  display: xvar(--ui-icon-large-display);
}
.spectrum-UIIcon--medium {
  display: xvar(--ui-icon-medium-display);
}

%spectrum-UIIcon--rotation90 {
  transform: rotate(90deg);
}

%spectrum-UIIcon--rotation180 {
  transform: rotate(180deg);
}

%spectrum-UIIcon--rotation270 {
  transform: rotate(270deg);
}

%spectrum-UIIcon-Chevron75 {
  inline-size: var(--spectrum-alias-ui-icon-chevron-size-75);
  block-size: var(--spectrum-alias-ui-icon-chevron-size-75);
}

%spectrum-UIIcon-Chevron100 {
  inline-size: var(--spectrum-alias-ui-icon-chevron-size-100);
  block-size: var(--spectrum-alias-ui-icon-chevron-size-100);
}

%spectrum-UIIcon-Chevron200 {
  inline-size: var(--spectrum-alias-ui-icon-chevron-size-200);
  block-size: var(--spectrum-alias-ui-icon-chevron-size-200);
}

%spectrum-UIIcon-Chevron300 {
  inline-size: var(--spectrum-alias-ui-icon-chevron-size-300);
  block-size: var(--spectrum-alias-ui-icon-chevron-size-300);
}

%spectrum-UIIcon-Chevron400 {
  inline-size: var(--spectrum-alias-ui-icon-chevron-size-400);
  block-size: var(--spectrum-alias-ui-icon-chevron-size-400);
}

%spectrum-UIIcon-Chevron500 {
  inline-size: var(--spectrum-alias-ui-icon-chevron-size-500);
  block-size: var(--spectrum-alias-ui-icon-chevron-size-500);
}

%spectrum-UIIcon-Arrow75 {
  inline-size: var(--spectrum-alias-ui-icon-arrow-size-75);
  block-size: var(--spectrum-alias-ui-icon-arrow-size-75);
}

%spectrum-UIIcon-Arrow100 {
  inline-size: var(--spectrum-alias-ui-icon-arrow-size-100);
  block-size: var(--spectrum-alias-ui-icon-arrow-size-100);
}

%spectrum-UIIcon-Arrow200 {
  inline-size: var(--spectrum-alias-ui-icon-arrow-size-200);
  block-size: var(--spectrum-alias-ui-icon-arrow-size-200);
}

%spectrum-UIIcon-Arrow300 {
  inline-size: var(--spectrum-alias-ui-icon-arrow-size-300);
  block-size: var(--spectrum-alias-ui-icon-arrow-size-300);
}

%spectrum-UIIcon-Arrow400 {
  inline-size: var(--spectrum-alias-ui-icon-arrow-size-400);
  block-size: var(--spectrum-alias-ui-icon-arrow-size-400);
}

%spectrum-UIIcon-Arrow500 {
  inline-size: var(--spectrum-alias-ui-icon-arrow-size-500);
  block-size: var(--spectrum-alias-ui-icon-arrow-size-500);
}

%spectrum-UIIcon-Arrow600 {
  inline-size: var(--spectrum-alias-ui-icon-arrow-size-600);
  block-size: var(--spectrum-alias-ui-icon-arrow-size-600);
}

/* Chevron */
.spectrum-UIIcon-ChevronRight75 {
  @inherit: %spectrum-UIIcon-Chevron75;
}

.spectrum-UIIcon-ChevronRight100 {
  @inherit: %spectrum-UIIcon-Chevron100;
}

.spectrum-UIIcon-ChevronRight200 {
  @inherit: %spectrum-UIIcon-Chevron200;
}

.spectrum-UIIcon-ChevronRight300 {
  @inherit: %spectrum-UIIcon-Chevron300;
}

.spectrum-UIIcon-ChevronRight400 {
  @inherit: %spectrum-UIIcon-Chevron400;
}

.spectrum-UIIcon-ChevronRight500 {
  @inherit: %spectrum-UIIcon-Chevron500;
}

.spectrum-UIIcon-ChevronDown75 {
  @inherit: %spectrum-UIIcon-Chevron75;
  @inherit: %spectrum-UIIcon--rotation90;
}

.spectrum-UIIcon-ChevronDown100 {
  @inherit: %spectrum-UIIcon-Chevron100;
  @inherit: %spectrum-UIIcon--rotation90;
}

.spectrum-UIIcon-ChevronDown200 {
  @inherit: %spectrum-UIIcon-Chevron200;
  @inherit: %spectrum-UIIcon--rotation90;
}

.spectrum-UIIcon-ChevronDown300 {
  @inherit: %spectrum-UIIcon-Chevron300;
  @inherit: %spectrum-UIIcon--rotation90;
}

.spectrum-UIIcon-ChevronDown400 {
  @inherit: %spectrum-UIIcon-Chevron400;
  @inherit: %spectrum-UIIcon--rotation90;
}

.spectrum-UIIcon-ChevronDown500 {
  @inherit: %spectrum-UIIcon-Chevron500;
  @inherit: %spectrum-UIIcon--rotation90;
}

.spectrum-UIIcon-ChevronLeft75 {
  @inherit: %spectrum-UIIcon-Chevron75;
  @inherit: %spectrum-UIIcon--rotation180;
}

.spectrum-UIIcon-ChevronLeft100 {
  @inherit: %spectrum-UIIcon-Chevron100;
  @inherit: %spectrum-UIIcon--rotation180;
}

.spectrum-UIIcon-ChevronLeft200 {
  @inherit: %spectrum-UIIcon-Chevron200;
  @inherit: %spectrum-UIIcon--rotation180;
}

.spectrum-UIIcon-ChevronLeft300 {
  @inherit: %spectrum-UIIcon-Chevron300;
  @inherit: %spectrum-UIIcon--rotation180;
}

.spectrum-UIIcon-ChevronLeft400 {
  @inherit: %spectrum-UIIcon-Chevron400;
  @inherit: %spectrum-UIIcon--rotation180;
}

.spectrum-UIIcon-ChevronLeft500 {
  @inherit: %spectrum-UIIcon-Chevron500;
  @inherit: %spectrum-UIIcon--rotation180;
}

.spectrum-UIIcon-ChevronUp75 {
  @inherit: %spectrum-UIIcon-Chevron75;
  @inherit: %spectrum-UIIcon--rotation270;
}

.spectrum-UIIcon-ChevronUp100 {
  @inherit: %spectrum-UIIcon-Chevron100;
  @inherit: %spectrum-UIIcon--rotation270;
}

.spectrum-UIIcon-ChevronUp200 {
  @inherit: %spectrum-UIIcon-Chevron200;
  @inherit: %spectrum-UIIcon--rotation270;
}

.spectrum-UIIcon-ChevronUp300 {
  @inherit: %spectrum-UIIcon-Chevron300;
  @inherit: %spectrum-UIIcon--rotation270;
}

.spectrum-UIIcon-ChevronUp400 {
  @inherit: %spectrum-UIIcon-Chevron400;
  @inherit: %spectrum-UIIcon--rotation270;
}

.spectrum-UIIcon-ChevronUp500 {
  @inherit: %spectrum-UIIcon-Chevron500;
  @inherit: %spectrum-UIIcon--rotation270;
}

/* Arrow */
.spectrum-UIIcon-ArrowRight75 {
  @inherit: %spectrum-UIIcon-Arrow75;
}

.spectrum-UIIcon-ArrowRight100 {
  @inherit: %spectrum-UIIcon-Arrow100;
}

.spectrum-UIIcon-ArrowRight200 {
  @inherit: %spectrum-UIIcon-Arrow200;
}

.spectrum-UIIcon-ArrowRight300 {
  @inherit: %spectrum-UIIcon-Arrow300;
}

.spectrum-UIIcon-ArrowRight400 {
  @inherit: %spectrum-UIIcon-Arrow400;
}

.spectrum-UIIcon-ArrowRight500 {
  @inherit: %spectrum-UIIcon-Arrow500;
}

.spectrum-UIIcon-ArrowRight600 {
  @inherit: %spectrum-UIIcon-Arrow600;
}

.spectrum-UIIcon-ArrowDown75 {
  @inherit: %spectrum-UIIcon-Arrow75;
  @inherit: %spectrum-UIIcon--rotation90;
}

.spectrum-UIIcon-ArrowDown100 {
  @inherit: %spectrum-UIIcon-Arrow100;
  @inherit: %spectrum-UIIcon--rotation90;
}

.spectrum-UIIcon-ArrowDown200 {
  @inherit: %spectrum-UIIcon-Arrow200;
  @inherit: %spectrum-UIIcon--rotation90;
}

.spectrum-UIIcon-ArrowDown300 {
  @inherit: %spectrum-UIIcon-Arrow300;
  @inherit: %spectrum-UIIcon--rotation90;
}

.spectrum-UIIcon-ArrowDown400 {
  @inherit: %spectrum-UIIcon-Arrow400;
  @inherit: %spectrum-UIIcon--rotation90;
}

.spectrum-UIIcon-ArrowDown500 {
  @inherit: %spectrum-UIIcon-Arrow500;
  @inherit: %spectrum-UIIcon--rotation90;
}

.spectrum-UIIcon-ArrowDown600 {
  @inherit: %spectrum-UIIcon-Arrow600;
  @inherit: %spectrum-UIIcon--rotation90;
}

.spectrum-UIIcon-ArrowLeft75 {
  @inherit: %spectrum-UIIcon-Arrow75;
  @inherit: %spectrum-UIIcon--rotation180;
}

.spectrum-UIIcon-ArrowLeft100 {
  @inherit: %spectrum-UIIcon-Arrow100;
  @inherit: %spectrum-UIIcon--rotation180;
}

.spectrum-UIIcon-ArrowLeft200 {
  @inherit: %spectrum-UIIcon-Arrow200;
  @inherit: %spectrum-UIIcon--rotation180;
}

.spectrum-UIIcon-ArrowLeft300 {
  @inherit: %spectrum-UIIcon-Arrow300;
  @inherit: %spectrum-UIIcon--rotation180;
}

.spectrum-UIIcon-ArrowLeft400 {
  @inherit: %spectrum-UIIcon-Arrow400;
  @inherit: %spectrum-UIIcon--rotation180;
}

.spectrum-UIIcon-ArrowLeft500 {
  @inherit: %spectrum-UIIcon-Arrow500;
  @inherit: %spectrum-UIIcon--rotation180;
}

.spectrum-UIIcon-ArrowLeft600 {
  @inherit: %spectrum-UIIcon-Arrow600;
  @inherit: %spectrum-UIIcon--rotation180;
}

.spectrum-UIIcon-ArrowUp75 {
  @inherit: %spectrum-UIIcon-Arrow75;
  @inherit: %spectrum-UIIcon--rotation270;
}

.spectrum-UIIcon-ArrowUp100 {
  @inherit: %spectrum-UIIcon-Arrow100;
  @inherit: %spectrum-UIIcon--rotation270;
}

.spectrum-UIIcon-ArrowUp200 {
  @inherit: %spectrum-UIIcon-Arrow200;
  @inherit: %spectrum-UIIcon--rotation270;
}

.spectrum-UIIcon-ArrowUp300 {
  @inherit: %spectrum-UIIcon-Arrow300;
  @inherit: %spectrum-UIIcon--rotation270;
}

.spectrum-UIIcon-ArrowUp400 {
  @inherit: %spectrum-UIIcon-Arrow400;
  @inherit: %spectrum-UIIcon--rotation270;
}

.spectrum-UIIcon-ArrowUp500 {
  @inherit: %spectrum-UIIcon-Arrow500;
  @inherit: %spectrum-UIIcon--rotation270;
}

.spectrum-UIIcon-ArrowUp600 {
  @inherit: %spectrum-UIIcon-Arrow600;
  @inherit: %spectrum-UIIcon--rotation270;
}

/* Checkmark */
.spectrum-UIIcon-Checkmark50 {
  inline-size: var(--spectrum-alias-ui-icon-checkmark-size-50);
  block-size: var(--spectrum-alias-ui-icon-checkmark-size-50);
}

.spectrum-UIIcon-Checkmark75 {
  inline-size: var(--spectrum-alias-ui-icon-checkmark-size-75);
  block-size: var(--spectrum-alias-ui-icon-checkmark-size-75);
}

.spectrum-UIIcon-Checkmark100 {
  inline-size: var(--spectrum-alias-ui-icon-checkmark-size-100);
  block-size: var(--spectrum-alias-ui-icon-checkmark-size-100);
}

.spectrum-UIIcon-Checkmark200 {
  inline-size: var(--spectrum-alias-ui-icon-checkmark-size-200);
  block-size: var(--spectrum-alias-ui-icon-checkmark-size-200);
}

.spectrum-UIIcon-Checkmark300 {
  inline-size: var(--spectrum-alias-ui-icon-checkmark-size-300);
  block-size: var(--spectrum-alias-ui-icon-checkmark-size-300);
}

.spectrum-UIIcon-Checkmark400 {
  inline-size: var(--spectrum-alias-ui-icon-checkmark-size-400);
  block-size: var(--spectrum-alias-ui-icon-checkmark-size-400);
}

.spectrum-UIIcon-Checkmark500 {
  inline-size: var(--spectrum-alias-ui-icon-checkmark-size-500);
  block-size: var(--spectrum-alias-ui-icon-checkmark-size-500);
}

.spectrum-UIIcon-Checkmark600 {
  inline-size: var(--spectrum-alias-ui-icon-checkmark-size-600);
  block-size: var(--spectrum-alias-ui-icon-checkmark-size-600);
}

/* Dash */
.spectrum-UIIcon-Dash50 {
  inline-size: var(--spectrum-alias-ui-icon-dash-size-50);
  block-size: var(--spectrum-alias-ui-icon-dash-size-50);
}

.spectrum-UIIcon-Dash75 {
  inline-size: var(--spectrum-alias-ui-icon-dash-size-75);
  block-size: var(--spectrum-alias-ui-icon-dash-size-75);
}

.spectrum-UIIcon-Dash100 {
  inline-size: var(--spectrum-alias-ui-icon-dash-size-100);
  block-size: var(--spectrum-alias-ui-icon-dash-size-100);
}

.spectrum-UIIcon-Dash200 {
  inline-size: var(--spectrum-alias-ui-icon-dash-size-200);
  block-size: var(--spectrum-alias-ui-icon-dash-size-200);
}

.spectrum-UIIcon-Dash300 {
  inline-size: var(--spectrum-alias-ui-icon-dash-size-300);
  block-size: var(--spectrum-alias-ui-icon-dash-size-300);
}

.spectrum-UIIcon-Dash400 {
  inline-size: var(--spectrum-alias-ui-icon-dash-size-400);
  block-size: var(--spectrum-alias-ui-icon-dash-size-400);
}

.spectrum-UIIcon-Dash500 {
  inline-size: var(--spectrum-alias-ui-icon-dash-size-500);
  block-size: var(--spectrum-alias-ui-icon-dash-size-500);
}

.spectrum-UIIcon-Dash600 {
  inline-size: var(--spectrum-alias-ui-icon-dash-size-600);
  block-size: var(--spectrum-alias-ui-icon-dash-size-600);
}

/* Cross */
.spectrum-UIIcon-Cross75 {
  inline-size: var(--spectrum-alias-ui-icon-cross-size-75);
  block-size: var(--spectrum-alias-ui-icon-cross-size-75);
}

.spectrum-UIIcon-Cross100 {
  inline-size: var(--spectrum-alias-ui-icon-cross-size-100);
  block-size: var(--spectrum-alias-ui-icon-cross-size-100);
}

.spectrum-UIIcon-Cross200 {
  inline-size: var(--spectrum-alias-ui-icon-cross-size-200);
  block-size: var(--spectrum-alias-ui-icon-cross-size-200);
}

.spectrum-UIIcon-Cross300 {
  inline-size: var(--spectrum-alias-ui-icon-cross-size-300);
  block-size: var(--spectrum-alias-ui-icon-cross-size-300);
}

.spectrum-UIIcon-Cross400 {
  inline-size: var(--spectrum-alias-ui-icon-cross-size-400);
  block-size: var(--spectrum-alias-ui-icon-cross-size-400);
}

.spectrum-UIIcon-Cross500 {
  inline-size: var(--spectrum-alias-ui-icon-cross-size-500);
  block-size: var(--spectrum-alias-ui-icon-cross-size-500);
}

.spectrum-UIIcon-Cross600 {
  inline-size: var(--spectrum-alias-ui-icon-cross-size-600);
  block-size: var(--spectrum-alias-ui-icon-cross-size-600);
}

/* Triple Gripper */
.spectrum-UIIcon-TripleGripper100 {
  inline-size: var(--spectrum-alias-ui-icon-triplegripper-size-100-height);
  block-size: var(--spectrum-alias-ui-icon-triplegripper-size-100-width);
}

/* Double Gripper */
.spectrum-UIIcon-DoubleGripper100 {
  inline-size: var(--spectrum-alias-ui-icon-doublegripper-size-100-height);
  block-size: var(--spectrum-alias-ui-icon-doublegripper-size-100-width);
}

/* Single Gripper */
.spectrum-UIIcon-SingleGripper100 {
  inline-size: var(--spectrum-alias-ui-icon-singlegripper-size-100-height);
  block-size: var(--spectrum-alias-ui-icon-singlegripper-size-100-width);
}

/* Corner Triangle */
.spectrum-UIIcon-CornerTriangle75 {
  inline-size: var(--spectrum-alias-ui-icon-cornertriangle-size-75);
  block-size: var(--spectrum-alias-ui-icon-cornertriangle-size-75);
}

.spectrum-UIIcon-CornerTriangle100 {
  inline-size: var(--spectrum-alias-ui-icon-cornertriangle-size-100);
  block-size: var(--spectrum-alias-ui-icon-cornertriangle-size-100);
}

.spectrum-UIIcon-CornerTriangle200 {
  inline-size: var(--spectrum-alias-ui-icon-cornertriangle-size-200);
  block-size: var(--spectrum-alias-ui-icon-cornertriangle-size-200);
}

.spectrum-UIIcon-CornerTriangle300 {
  inline-size: var(--spectrum-alias-ui-icon-cornertriangle-size-300);
  block-size: var(--spectrum-alias-ui-icon-cornertriangle-size-300);
}

/* Asterisk */
.spectrum-UIIcon-Asterisk75 {
  inline-size: var(--spectrum-alias-ui-icon-asterisk-size-75);
  block-size: var(--spectrum-alias-ui-icon-asterisk-size-300);
}

.spectrum-UIIcon-Asterisk100 {
  inline-size: var(--spectrum-alias-ui-icon-asterisk-size-100);
  block-size: var(--spectrum-alias-ui-icon-asterisk-size-100);
}

.spectrum-UIIcon-Asterisk200 {
  inline-size: var(--spectrum-alias-ui-icon-asterisk-size-200);
  block-size: var(--spectrum-alias-ui-icon-asterisk-size-200);
}

.spectrum-UIIcon-Asterisk300 {
  inline-size: var(--spectrum-alias-ui-icon-asterisk-size-300);
  block-size: var(--spectrum-alias-ui-icon-asterisk-size-300);
}