@use '../../token/scss' as *;

@mixin icon {
  .cck-svg-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .cck-svg-icon__svg {
    width: 100%;
    height: 100%;
  }

  .cck-svg-icon__size {
    &--xs {
      width: $icon-xs;
      height: $icon-xs;
    }

    &--sm {
      width: $icon-sm;
      height: $icon-sm;
    }

    &--md {
      width: $icon-md;
      height: $icon-md;
    }

    &--lg {
      width: $icon-lg;
      height: $icon-lg;
    }

    &--xl {
      width: $icon-xl;
      height: $icon-xl;
    }

    &--2xl {
      width: $icon-2xl;
      height: $icon-2xl;
    }

    &--3xl {
      width: $icon-3xl;
      height: $icon-3xl;
    }

    &--4xl {
      width: $icon-4xl;
      height: $icon-4xl;
    }
  }

  .cck-svg-icon__color {
    &--grey {
      fill: $base-fill-4;
    }

    &--brand {
      fill: $state-brand-active;
    }

    &--highlight {
      fill: $state-highlight-active;
    }

    &--success {
      fill: $state-success-active;
    }

    &--danger {
      fill: $state-danger-active;
    }
  }
}