@charset "UTF-8";

@if $enable-icons == true {
  .icon {
    fill: $color-base;
    fill-rule: evenodd;
    transition: all $transition-duration-base-min;

    &.icon--12 {
      @include size(1.2rem);
    }

    &.icon--16 {
      @include size(1.6rem !important);
    }

    &.icon--18 {
      @include size(1.8rem !important);
    }

    &.icon--20 {
      @include size(2rem !important);
    }

    &.icon--24 {
      @include size(2.4rem !important);
    }

    &.icon--32 {
      @include size(3.2rem !important);
    }

    &.icon--48 {
      @include size(4.8rem !important);
    }

    &.icon--64 {
      @include size(6.4rem !important);
    }

    &.icon--25-24 {
      @include size(2.5rem !important, 2.4rem !important);
    }

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

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

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

    &.is-white,
    &.white {
      fill: #ffffff !important;
    }

    &.grapefruit {
      fill: $brand-grapefruit !important;
    }

    &.is-turquoise,
    &.turquoise {
      fill: $brand-turquoise !important;
    }

    &.is-blue,
    &.blue {
      fill: $brand-sky !important;
    }

    &.is-gray,
    &.gray {
      fill: $color-placeholder !important;
    }

    &.is-amber,
    &.amber {
      fill: $color-amber !important;
    }

    &.brand {
      fill: $color-success !important;
    }
  }
}

.icon-info-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid $color-placeholder;
  cursor: pointer;
  transition: fill $transition-duration-base;

  &:hover {
    border-color: $color-base;

    .icon {
      fill: $color-base;
    }
  }

  &.icon--20 {
    @include size(2rem);
  }

  .icon {
    @include size(0.25rem, 1rem);

    fill: $color-placeholder;
  }

  &--no-border {
    border: none;
  }

  &--inline-flex {
    display: inline-flex;
  }
}

// icons for svg-mask

.icon-mask-container {
  @include size(0);

  overflow: hidden;
  position: absolute;
  z-index: -100;
}