Icon.css

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: -0.125em;

  &:focus {
    outline: none;
  }
}

:global .stripes__icon {
  flex-shrink: 0;
  fill: currentcolor;
  height: 1.1429em;
  width: 1.1429em;
}

/**
 * Sizes
 */

.small {
  font-size: 0.83em;
}

.medium {
  font-size: 1em;
}

.large {
  font-size: 1.17em;
}

/**
 * Coloring
 */
.status-error {
  color: var(--error);
}

.status-warn {
  color: var(--warn);
}

.status-success {
  color: var(--success);
}

/**
 * Label
 */

/* Positioning */
.icon-position-start svg {
  order: 0;
}

.icon-position-end svg {
  order: 1;
}

/**
 * Icon styles
 */

/* Action icon style */
.icon.action svg {
  fill: #fff;
  background-color: var(--color-fill-current);
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  padding: 0.1rem;
}

/**
 * Flippable
 * Icon should flip on dir="rtl"
 */

:global([dir="rtl"]) .icon.flippable svg {
  transform: rotate(180deg);
}

/**
  Spacing
  Note: Using pseudo elements to add spacing for RTL support
**/

.label::before,
.label::after {
  content: '';
  display: none;
  width: 0.35em;
}

.icon-position-start .label::before,
.icon-position-end .label::after {
  display: inline-block;
}