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

@mixin chip-list {
  .cck-chip-list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
  }

  .cck-chip-list__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font: $text-base-font-medium;
    color: $text-dark-primary;

    &::placeholder {
      color: $text-dark-tertiary;
      transition: color 100ms ease-in;
    }

    &:not(:focus)::placeholder {
      color: transparent;
    }
  }

  .cck-chip-list__size {
    &--sm {
      gap: 6px;

      .cck-chip-list__input {
        height: 26px;
        margin-left: $spacing-5;
        font: $text-xs-font-medium;

        &:first-child {
          margin-left: calc($spacing-6 - 4px);
        }
      }
    }

    &--md {
      gap: 6px;

      .cck-chip-list__input {
        height: 34px;
        margin-left: $spacing-6;
        font: $text-base-font-medium;

        &:first-child {
          margin-left: calc($spacing-7 - 4px);
        }
      }
    }

    &--lg {
      gap: 6px;

      .cck-chip-list__input {
        height: 44px;
        margin-left: $spacing-7;
        font: $text-lg-font-medium;

        &:first-child {
          margin-left: calc($spacing-7 - 6px);
        }
      }
    }
  }
}