@adobe/coral-spectrum/coral-component-icon/src/styles/index.css

Coral Spectrum is a JavaScript library of Web Components following Spectrum design patterns.

/**
 * 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.
 */
._coral-Icon,
._coral-UIIcon {
  display: inline-block;
  color: inherit;
  fill: currentColor;
  pointer-events: none;
}
._coral-Icon:not(:root), ._coral-UIIcon:not(:root) {
    overflow: hidden;
  }
._coral-Icon--sizeXXS,
  ._coral-Icon--sizeXXS img,
  ._coral-Icon--sizeXXS svg {
    height: 9px;
    width: 9px;
  }
._coral-Icon--sizeXS,
  ._coral-Icon--sizeXS img,
  ._coral-Icon--sizeXS svg {
    height: 12px;
    width: 12px;
  }
._coral-Icon--sizeS,
  ._coral-Icon--sizeS img,
  ._coral-Icon--sizeS svg {
    height: 18px;
    width: 18px;
  }
._coral-Icon--sizeM,
  ._coral-Icon--sizeM img,
  ._coral-Icon--sizeM svg {
    height: 24px;
    width: 24px;
  }
._coral-Icon--sizeL,
  ._coral-Icon--sizeL img,
  ._coral-Icon--sizeL svg {
    height: 36px;
    width: 36px;
  }
._coral-Icon--sizeXL,
  ._coral-Icon--sizeXL img,
  ._coral-Icon--sizeXL svg {
    height: 48px;
    width: 48px;
  }
._coral-Icon--sizeXXL,
  ._coral-Icon--sizeXXL img,
  ._coral-Icon--sizeXXL svg {
    height: 72px;
    width: 72px;
  }
._coral--medium ._coral-UIIcon--large {
    display: none;
  }
._coral--medium ._coral-UIIcon--medium {
    display: inline;
  }
.coral--large ._coral-UIIcon--medium {
    display: none;
  }
.coral--large ._coral-UIIcon--large {
    display: inline;
  }
._coral-UIIcon--large {
  display: none;
}
._coral-UIIcon--medium {
  display: block;
}
._coral-UIIcon-AlertMedium {
  width: 18px;
  height: 18px;
}
._coral-UIIcon-AlertSmall {
  width: 14px;
  height: 14px;
}
._coral-UIIcon-ArrowDownSmall {
  width: 8px;
  height: 10px;
}
._coral-UIIcon-ArrowLeftMedium {
  width: 14px;
  height: 10px;
}
._coral-UIIcon-Asterisk {
  width: 8px;
  height: 8px;
}
._coral-UIIcon-CheckmarkMedium {
  width: 12px;
  height: 12px;
}
._coral-UIIcon-CheckmarkSmall {
  width: 10px;
  height: 10px;
}
._coral-UIIcon-ChevronDownMedium {
  width: 10px;
  height: 6px;
}
._coral-UIIcon-ChevronDownSmall {
  width: 8px;
  height: 6px;
}
._coral-UIIcon-ChevronLeftLarge {
  width: 12px;
  height: 16px;
}
._coral-UIIcon-ChevronLeftMedium {
  width: 6px;
  height: 10px;
}
._coral-UIIcon-ChevronRightLarge {
  width: 12px;
  height: 16px;
}
._coral-UIIcon-ChevronRightMedium {
  width: 6px;
  height: 10px;
}
._coral-UIIcon-ChevronRightSmall {
  width: 6px;
  height: 8px;
}
._coral-UIIcon-ChevronUpSmall {
  width: 8px;
  height: 6px;
}
._coral-UIIcon-CornerTriangle {
  width: 5px;
  height: 5px;
}
._coral-UIIcon-CrossLarge {
  width: 12px;
  height: 12px;
}
._coral-UIIcon-CrossMedium,._coral-UIIcon-CrossSmall {
  width: 8px;
  height: 8px;
}
._coral-UIIcon-DashSmall {
  width: 10px;
  height: 10px;
}
._coral-UIIcon-DoubleGripper {
  width: 16px;
  height: 4px;
}
._coral-UIIcon-FolderBreadcrumb,._coral-UIIcon-HelpMedium {
  width: 18px;
  height: 18px;
}
._coral-UIIcon-HelpSmall {
  width: 14px;
  height: 14px;
}
._coral-UIIcon-InfoMedium {
  width: 18px;
  height: 18px;
}
._coral-UIIcon-InfoSmall {
  width: 14px;
  height: 14px;
}
._coral-UIIcon-Magnifier {
  width: 16px;
  height: 16px;
}
._coral-UIIcon-SkipLeft,._coral-UIIcon-SkipRight {
  width: 9px;
  height: 10px;
}
._coral-UIIcon-Star,._coral-UIIcon-StarOutline,._coral-UIIcon-SuccessMedium {
  width: 18px;
  height: 18px;
}
._coral-UIIcon-SuccessSmall {
  width: 14px;
  height: 14px;
}
._coral-UIIcon-TripleGripper {
  width: 10px;
  height: 7px;
}

.coral--large ._coral-Icon--sizeXXS,
  .coral--large ._coral-Icon--sizeXXS img,
  .coral--large ._coral-Icon--sizeXXS svg {
    height: 11px;
    width: 11px;
  }
.coral--large ._coral-Icon--sizeXS,
  .coral--large ._coral-Icon--sizeXS img,
  .coral--large ._coral-Icon--sizeXS svg {
    height: 15px;
    width: 15px;
  }
.coral--large ._coral-Icon--sizeS,
  .coral--large ._coral-Icon--sizeS img,
  .coral--large ._coral-Icon--sizeS svg {
    height: 22px;
    width: 22px;
  }
.coral--large ._coral-Icon--sizeM,
  .coral--large ._coral-Icon--sizeM img,
  .coral--large ._coral-Icon--sizeM svg {
    height: 30px;
    width: 30px;
  }
.coral--large ._coral-Icon--sizeL,
  .coral--large ._coral-Icon--sizeL img,
  .coral--large ._coral-Icon--sizeL svg {
    height: 44px;
    width: 44px;
  }
.coral--large ._coral-Icon--sizeXL,
  .coral--large ._coral-Icon--sizeXL img,
  .coral--large ._coral-Icon--sizeXL svg {
    height: 60px;
    width: 60px;
  }
.coral--large ._coral-Icon--sizeXXL,
  .coral--large ._coral-Icon--sizeXXL img,
  .coral--large ._coral-Icon--sizeXXL svg {
    height: 90px;
    width: 90px;
  }
.coral--large ._coral-UIIcon--large {
  display: none;
}
.coral--large ._coral-UIIcon--medium {
  display: block;
}
.coral--large ._coral-UIIcon-AlertMedium {
  width: 22px;
  height: 22px;
}
.coral--large ._coral-UIIcon-AlertSmall {
  width: 18px;
  height: 18px;
}
.coral--large ._coral-UIIcon-ArrowDownSmall {
  width: 10px;
  height: 12px;
}
.coral--large ._coral-UIIcon-ArrowLeftMedium {
  width: 18px;
  height: 12px;
}
.coral--large ._coral-UIIcon-Asterisk {
  width: 10px;
  height: 10px;
}
.coral--large ._coral-UIIcon-CheckmarkMedium {
  width: 16px;
  height: 16px;
}
.coral--large ._coral-UIIcon-CheckmarkSmall {
  width: 12px;
  height: 12px;
}
.coral--large ._coral-UIIcon-ChevronDownMedium {
  width: 12px;
  height: 8px;
}
.coral--large ._coral-UIIcon-ChevronDownSmall {
  width: 10px;
  height: 8px;
}
.coral--large ._coral-UIIcon-ChevronLeftLarge {
  width: 16px;
  height: 20px;
}
.coral--large ._coral-UIIcon-ChevronLeftMedium {
  width: 8px;
  height: 12px;
}
.coral--large ._coral-UIIcon-ChevronRightLarge {
  width: 16px;
  height: 20px;
}
.coral--large ._coral-UIIcon-ChevronRightMedium {
  width: 8px;
  height: 12px;
}
.coral--large ._coral-UIIcon-ChevronRightSmall {
  width: 8px;
  height: 10px;
}
.coral--large ._coral-UIIcon-ChevronUpSmall {
  width: 10px;
  height: 8px;
}
.coral--large ._coral-UIIcon-CornerTriangle {
  width: 6px;
  height: 6px;
}
.coral--large ._coral-UIIcon-CrossLarge {
  width: 16px;
  height: 16px;
}
.coral--large ._coral-UIIcon-CrossMedium,.coral--large ._coral-UIIcon-CrossSmall {
  width: 10px;
  height: 10px;
}
.coral--large ._coral-UIIcon-DashSmall {
  width: 12px;
  height: 12px;
}
.coral--large ._coral-UIIcon-DoubleGripper {
  width: 20px;
  height: 5px;
}
.coral--large ._coral-UIIcon-FolderBreadcrumb,.coral--large ._coral-UIIcon-HelpMedium {
  width: 22px;
  height: 22px;
}
.coral--large ._coral-UIIcon-HelpSmall {
  width: 18px;
  height: 18px;
}
.coral--large ._coral-UIIcon-InfoMedium {
  width: 22px;
  height: 22px;
}
.coral--large ._coral-UIIcon-InfoSmall {
  width: 18px;
  height: 18px;
}
.coral--large ._coral-UIIcon-Magnifier {
  width: 20px;
  height: 20px;
}
.coral--large ._coral-UIIcon-SkipLeft,.coral--large ._coral-UIIcon-SkipRight {
  width: 10px;
  height: 12px;
}
.coral--large ._coral-UIIcon-Star,.coral--large ._coral-UIIcon-StarOutline,.coral--large ._coral-UIIcon-SuccessMedium {
  width: 22px;
  height: 22px;
}
.coral--large ._coral-UIIcon-SuccessSmall {
  width: 18px;
  height: 18px;
}
.coral--large ._coral-UIIcon-TripleGripper {
  width: 12px;
  height: 9px;
}

coral-icon._coral-Icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
._coral-Icon-collection {
  position: fixed;
  left: -999px;
  top: -999px;
}