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

@mixin button {
  .cck-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;

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

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

  .cck-button__backdrop {
    display: none;
  }

  .cck-button__default {
    &.cck-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-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-button__ghost {
    background-color: $base-surface-1;
    outline: 1px solid transparent;

    &.cck-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-button__size {
    &--sm {
      height: 36px;
      gap: $spacing-3;
      padding: $spacing-0 $spacing-7;
      font: $text-sm-font-semibold;
    }

    &--md {
      height: 44px;
      gap: $spacing-5;
      padding: $spacing-0 $spacing-8;
      font: $text-base-font-semibold;
    }

    &--lg {
      height: 44px;
      gap: $spacing-7;
      padding: $spacing-0 $spacing-8;
      font: $text-lg-font-semibold;
    }

    &--xl {
      height: 56px;
      gap: $spacing-7;
      padding: $spacing-0 $spacing-10;
      font: $text-xl-font-semibold;
    }
  }
}