@use '../../token/scss' as *;
@use './variants/button-disable' as *;

@mixin icon-button {
  .cck-icon-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    border: none;
    outline: transparent;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: $radi-6;
    transition: all 100ms;

    .cck-svg-icon--default-color {
      fill: currentcolor;
    }

    &:focus-visible {
      box-shadow: 0 0 0 3px $state-brand-selected;
    }
  }

  .cck-icon-button__default {
    &.cck-icon-button__color {
      &--brand {
        background-color: $state-brand-active;
        color: $text-light-primary;

        &:hover {
          background-color: $state-brand-hover;
        }

        &:active {
          background-color: $state-brand-selected;
        }

        &:disabled {
          @include button-disable;
        }
      }

      &--highlight {
        background-color: $state-highlight-active;
        color: $text-light-primary;

        &:hover {
          background-color: $state-highlight-hover;
        }

        &:active {
          background-color: $state-highlight-selected;
        }

        &:disabled {
          @include button-disable;
        }
      }

      &--success {
        background-color: $state-success-active;
        color: $text-light-primary;

        &:hover {
          background-color: $state-success-hover;
        }

        &:active {
          background-color: $state-success-selected;
        }

        &:disabled {
          @include button-disable;
        }
      }

      &--danger {
        background-color: $state-danger-active;
        color: $text-light-primary;

        &:hover {
          background-color: $state-danger-hover;
        }

        &:active {
          background-color: $state-danger-selected;
        }

        &:disabled {
          @include button-disable;
        }
      }
    }
  }

  .cck-icon-button__secondary {
    background-color: $base-surface-2;
    color: $text-dark-primary;
    border: 1px solid $base-border;
    outline: 1px solid transparent;

    &:hover {
      background-color: $base-fill-2;
      border: 1px solid $base-fill-2;
    }

    &:active {
      background-color: $base-fill-1;
      border: 1px solid $base-border;
    }

    &:disabled {
      @include button-disable;

      border: none;
    }
  }

  .cck-icon-button__ghost {
    background-color: $base-surface-1;
    outline: 1px solid transparent;

    &.cck-icon-button__color {
      &--brand {
        border: 1px solid $state-brand-active;
        color: $state-brand-active;

        &:hover {
          outline: 1px solid $state-brand-hover;
          border: 1px solid $state-brand-hover;
        }

        &:active {
          border: 1px solid $state-brand-selected;
          outline: 1px solid $state-brand-selected;
        }

        &:disabled {
          @include button-disable;

          border: none;
        }
      }

      &--highlight {
        border: 1px solid $state-highlight-active;
        color: $state-highlight-active;

        &:hover {
          border: 1px solid $state-highlight-hover;
          outline: 1px solid $state-highlight-hover;
        }

        &:active {
          border: 1px solid $state-highlight-selected;
          outline: 1px solid $state-highlight-selected;
        }

        &:disabled {
          @include button-disable;

          border: none;
        }
      }

      &--success {
        border: 1px solid $state-success-active;
        color: $state-success-active;

        &:hover {
          border: 1px solid $state-success-hover;
          outline: 1px solid $state-success-hover;
        }

        &:active {
          border: 1px solid $state-success-selected;
          outline: 1px solid $state-success-selected;
        }

        &:disabled {
          @include button-disable;

          border: none;
        }
      }

      &--danger {
        border: 1px solid $state-danger-active;
        color: $state-danger-active;

        &:hover {
          border: 1px solid $state-danger-hover;
          outline: 1px solid $state-danger-hover;
        }

        &:active {
          border: 1px solid $state-danger-selected;
          outline: 1px solid $state-danger-selected;
        }

        &:disabled {
          @include button-disable;

          border: none;
        }
      }
    }
  }

  .cck-icon-button__size {
    &--sm {
      width: 36px;
      height: 36px;

      .cck-svg-icon--default-size {
        width: $icon-md;
        height: $icon-md;
      }
    }

    &--md {
      width: 44px;
      height: 44px;

      .cck-svg-icon--default-size {
        width: $icon-lg;
        height: $icon-lg;
      }
    }

    &--lg {
      width: 44px;
      height: 44px;

      .cck-svg-icon--default-size {
        width: $icon-xl;
        height: $icon-xl;
      }
    }

    &--xl {
      width: 56px;
      height: 56px;

      .cck-svg-icon--default-size {
        width: $icon-2xl;
        height: $icon-2xl;
      }
    }
  }
}