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

@mixin chip {
  .cck-chip {
    border-radius: $radi-5;
    border: 1px solid $base-border;
    display: flex;
    align-items: center;
    color: $text-dark-primary;
    cursor: default;
    background-color: $base-surface-2;
    transition: all 100ms;
  }

  .cck-chip--disabled {
    border: 1px solid transparent;
    background-color: $base-fill-1;
    color: $base-disabled;
    pointer-events: none;
    user-select: none;
  }

  .cck-chip__content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .cck-chip__remove-icon-wrapper {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .cck-icon-button {
      background-color: transparent;
      color: $base-fill-4;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      padding: 0;

      &:hover {
        background-color: $base-fill-1;
      }

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

  .cck-chip__size {
    &--sm {
      height: 26px;
      gap: $spacing-4;
      padding: 0 $spacing-7;
      font: $text-xs-font-medium;

      &.cck-chip--removable {
        padding: 0 $spacing-6 0 $spacing-7;
      }
    }

    &--md {
      height: 34px;
      gap: $spacing-4;
      padding: 0 $spacing-8;
      font: $text-base-font-medium;

      &.cck-chip--removable {
        padding: 0 $spacing-7 0 $spacing-8;
      }
    }

    &--lg {
      height: 44px;
      gap: $spacing-6;
      padding: 0 $spacing-9;
      font: $text-lg-font-medium;

      &.cck-chip--removable {
        padding: 0 $spacing-8 0 $spacing-9;
      }
    }
  }
}