@import "../mixins/_color-scheme";
@import "../mixins/_fluid.scss";

.q-icon {
  display: inline-block;
  line-height: $line-height;

  &.q-disabled {
    @include disabled;
  }

  &.q-circular {
    background-color: $white;
    border-radius: 50%;
    padding: 1.25rem;
    border: 1px solid $very-light-pink;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }

  // Icon Sizes
  &.q-icon-xlarge {
    font-size: $icon-font-size-xlarge;
  }

  &.q-icon-large {
    font-size: $icon-font-size-large;
  }

  &.q-icon-medium {
    font-size: $icon-font-size-medium;
  }

  &.q-icon-small {
    font-size: $icon-font-size-small;
  }

  //Color variants
  @each $color, $value in $colors {
    &.#{$color} {
      &:before {
        color: $value;
      }
    }
  }

  > span {
    font-family: inherit;
  }
}