// Component: Icon

@use '00-config' as *;

.c-icon {
  display: inline-block;
  fill: currentColor;
  height: 1em;
  inset-block-start: -2px;
  position: relative;
  transition: none;
  vertical-align: middle;
  width: 1em;

  // Fixes delayed transitions in Chrome.
  * {
    transition: none;
  }

  &.is-spaced-before {
    margin-inline-start: 0.25em;
  }

  &.is-spaced-after {
    margin-inline-end: 0.25em;
  }

  &.is-down {
    transform: rotate(180deg);
  }

  &.is-left {
    transform: rotate(270deg);
  }

  &.is-right {
    transform: rotate(90deg);
  }
}
