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

@mixin form-field {
  .cck-form-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 100px;

    .cck-select {
      height: 100%;
      width: 100%;
      flex: 1;
    }

    .cck-input {
      width: 100%;
      flex: 1;
    }
  }

  .cck-form-field--error {
    .cck-form-field__wrapper {
      border: 1px solid $state-danger-active;
      outline: 1px solid $state-danger-active;
    }
  }

  .cck-form-field--focused {
    .cck-form-field__wrapper {
      border: 1px solid $state-brand-active;
      outline: 1px solid $state-brand-active;
      background-color: $base-surface-2;
    }
  }

  .cck-form-field--disabled {
    .cck-form-field__wrapper {
      background-color: $base-fill-1;
      user-select: none;
      pointer-events: none;
    }
  }

  .cck-form-field__wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-radius: $radi-6;
    border: 1px solid $base-border;
    outline: 1px solid transparent;
    overflow: hidden;
    background-color: $base-surface-1;
  }

  .cck-form-field__size {
    &--sm {
      &.cck-form-field--with-input,
      &.cck-form-field--with-select {
        .cck-form-field__wrapper {
          height: 36px;
        }

        .cck-form-field__input-wrapper {
          padding: 0 $spacing-6 0 $spacing-7;
        }
      }

      .cck-form-field--with-textarea {
        .cck-form-field__input-wrapper {
          padding: $spacing-6 $spacing-6 $spacing-6 $spacing-7;
        }
      }

      &.cck-form-field--with-chip-list {
        .cck-form-field__input-wrapper {
          padding: 4px;
        }
      }

      .cck-input,
      .cck-leading,
      .cck-trailing,
      .cck-textarea,
      .cck-select {
        font: $text-sm-font-medium;
      }
    }

    &--md {
      &.cck-form-field--with-input,
      &.cck-form-field--with-select {
        .cck-form-field__wrapper {
          height: 44px;
        }

        .cck-form-field__input-wrapper {
          padding: 0 $spacing-7 0 $spacing-8;
        }
      }

      .cck-form-field--with-textarea {
        .cck-form-field__input-wrapper {
          padding: $spacing-7 $spacing-7 $spacing-7 $spacing-8;
        }
      }

      &.cck-form-field--with-chip-list {
        .cck-form-field__input-wrapper {
          padding: 4px;
        }
      }

      .cck-input,
      .cck-leading,
      .cck-trailing,
      .cck-textarea,
      .cck-select {
        font: $text-base-font-medium;
      }
    }

    &--lg {
      &.cck-form-field--with-input,
      &.cck-form-field--with-select {
        .cck-form-field__wrapper {
          height: 56px;
        }

        .cck-form-field__input-wrapper {
          padding: 0 $spacing-7 0 $spacing-8;
        }
      }

      .cck-form-field--with-textarea {
        .cck-form-field__input-wrapper {
          padding: $spacing-7 $spacing-7 $spacing-7 $spacing-8;
        }
      }

      &.cck-form-field--with-chip-list {
        .cck-form-field__input-wrapper {
          padding: 6px;
        }
      }

      .cck-input,
      .cck-leading,
      .cck-trailing,
      .cck-textarea,
      .cck-select {
        font: $text-lg-font-medium;
      }
    }
  }

  .cck-form-field__feedback-wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    &:empty {
      display: none;
    }
  }

  .cck-form-field__input-wrapper {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .cck-form-field--with-chip-list {
    .cck-chip-list {
      flex: 1;
    }

    .cck-form-field__wrapper {
      cursor: text;
    }

    & .cck-suffix,
    & .cck-prefix {
      align-self: flex-start;
    }

    &.cck-form-field__size--sm .cck-suffix {
      margin-top: 6px;
      margin-right: 4px;
    }

    &.cck-form-field__size--md .cck-suffix {
      margin-top: 8px;
      margin-right: 4px;
    }

    &.cck-form-field__size--lg .cck-suffix {
      margin-top: 12px;
      margin-right: 8px;
      margin-left: 4px;
    }

    &.cck-form-field__size--sm .cck-prefix {
      margin-top: 6px;
      margin-left: 4px;
    }

    &.cck-form-field__size--md .cck-prefix {
      margin-top: 8px;
      margin-left: 4px;
    }

    &.cck-form-field__size--lg .cck-prefix {
      margin-top: 12px;
      margin-left: 8px;
      margin-right: 4px;
    }
  }

  .cck-form-field--with-textarea {
    .cck-form-field__input-wrapper {
      padding: 10px 10px 10px 16px;

      &:hover:not(:has(textarea:focus-visible)) {
        background-color: $base-fill-1;
      }
    }
  }

  .cck-form-field--with-input,
  .cck-form-field--with-select {
    .cck-form-field__input-wrapper {
      &:hover:not(:has(input:focus-visible)) {
        background-color: $base-fill-1;
      }
    }
  }
}