@use '@funidata/fudis-core' as core;

.fudis-icon {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  transition: all 0.6s ease;

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

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

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

  &__lg {
    width: core.$spacing-lg;
    height: core.$spacing-lg;
  }

  &__sm {
    width: core.$spacing-sm;
    height: core.$spacing-sm;
  }

  &__color {
    &__yellow {
      fill: core.$color-yellow;
    }

    &__red {
      fill: core.$color-red;
    }

    &__gray-dark {
      fill: core.$color-gray-dark;
    }

    &__gray-light {
      fill: core.$color-gray-light;
    }

    &__primary {
      fill: core.$color-primary;
    }

    &__primary-dark {
      fill: core.$color-primary-dark;
    }

    &__green {
      fill: core.$color-green;
    }

    &__white {
      fill: core.$color-white;
    }
  }
}