@import '../../styles/variables';

.Icon {
  display: inline-flex;

  &_size {
    &-extra-small {
      width: $item * 1.5;
      height: $item * 1.5;
    }

    &-small {
      width: $item * 2;
      height: $item * 2;
    }

    &-medium {
      width: $item * 3;
      height: $item * 3;
    }

    &-large {
      width: $item * 4;
      height: $item * 4;
    }

    &-extra-large {
      width: $item * 8;
      height: $item * 8;
    }
  }

  &_color {
    &-black {
      fill: $black;
    }

    &-white {
      fill: $white;
    }

    &-blue {
      fill: $action-color;
    }

    &-gray {
      fill: $gray70;
    }

    &-gray-dark {
      fill: $gray50;
    }

    &-brand {
      fill: $brand-color;
    }

    &-green {
      fill: $success-color;
    }

    &-orange {
      fill: $warning-color;
    }

    &-red {
      fill: $error-color;
    }

    &-green_mix {
      fill: mix($success-color, $white, 35%);
    }

    &-blue_mix {
      fill: mix($action-color, $white, 35%);
    }

    &-yellow {
      fill: $warning-color;
    }
  }
}

//TODO: delete after migrate on react
pa-icon {
  display: inline-flex;
  align-items: center;
}