@use '@kyndryl-design-system/shidoka-foundation/scss/mixins/visibility.scss';
@use '@kyndryl-design-system/shidoka-foundation/scss/mixins/typography.scss';
@use '../../common/scss/mixins.scss';

.label-text {
  @include typography.type-ui-02;
  color: var(--kd-color-text-forms-label-primary);
  font-weight: var(--kd-font-weight-medium);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin-bottom: 8px;
  cursor: default;
  z-index: 4;

  &.sr-only {
    @include visibility.sr-only;
    margin-bottom: 0;
  }

  [disabled] & {
    color: var(--kd-color-text-level-disabled);
  }

  [readonly] & {
    color: var(--kd-color-text-level-disabled);
  }

  &[readonly] {
    color: var(--kd-color-text-level-disabled);
  }
}

.required {
  text-decoration: none;
  color: var(--kd-color-status-error-dark);

  [disabled] & {
    color: var(--kd-color-text-level-disabled);
  }
}

.input-wrapper {
  position: relative;
  display: flex;

  input[disabled],
  .input-custom[disabled],
  textarea[disabled] {
    & ~ .input-icon {
      color: var(--kd-color-icon-disabled);
    }
  }
  .input-icon.is-disabled {
    color: var(--kd-color-icon-disabled);
  }
}

.options-text {
  @include typography.type-ui-03;
  margin: 0;
  color: var(--kd-color-text-forms-label-secondary);
}

input,
.input-custom,
.flatpickr-input,
textarea {
  @include typography.type-body-02;
  pointer-events: auto;
  border-color: var(--kd-color-border-forms-default);
  color: var(--kd-color-text-forms-input-field-text);
  transition: background-color 150ms ease-out, border-color 150ms ease-out,
    outline-color 150ms ease-out;
  background: var(--kd-color-background-forms-default);
  outline: 2px solid transparent;
  outline-offset: -2px;

  .ai-connected & {
    background: var(--kd-color-background-forms-default);

    &:focus-visible {
      outline-color: var(--kd-color-border-variants-focus);
    }
  }

  &:hover {
    border-color: var(--kd-color-border-ui-hover);
  }

  &:focus-visible {
    outline-color: var(--kd-color-border-variants-focus);
  }

  &::placeholder {
    color: var(--kd-color-text-variant-placeholder);
  }

  &:-ms-input-placeholder {
    color: var(--kd-color-text-variant-placeholder);
  }

  &::-ms-input-placeholder {
    color: var(--kd-color-text-variant-placeholder);
  }

  &.is-readonly {
    background: var(--kd-color-background-forms-disabled);
    border-color: var(--kd-color-border-ui-disabled);

    &:hover {
      border-color: var(--kd-color-border-ui-disabled);
    }

    &::placeholder {
      color: var(--kd-color-text-variant-placeholder);
    }

    &:-ms-input-placeholder {
      color: var(--kd-color-text-variant-placeholder);
    }

    &::-ms-input-placeholder {
      color: var(--kd-color-text-variant-placeholder);
    }
  }

  &[disabled] {
    background: var(--kd-color-background-forms-disabled);
    border: none;
    color: var(--kd-color-text-level-disabled);
    cursor: not-allowed;

    .arrow-icon {
      color: var(--kd-color-icon-disabled);
    }

    &[invalid] {
      border-color: var(--kd-color-border-ui-disabled);
    }

    &::placeholder {
      color: var(--kd-color-text-level-disabled);
    }

    &:-ms-input-placeholder {
      color: var(--kd-color-text-level-disabled);
    }

    &::-ms-input-placeholder {
      color: var(--kd-color-text-level-disabled);
    }
  }

  &:not([disabled])[invalid] {
    border-color: var(--kd-color-border-variants-destructive);
  }
}

.error {
  display: var(--kyn-error-display, flex);
  align-items: center;
  color: var(--kd-color-text-variant-destructive);
  margin-top: var(--kyn-error-margin-top, 8px);
  cursor: default;
  position: var(--kyn-error-position, relative);
  top: var(--kyn-error-top, auto);
  left: var(--kyn-error-left, auto);
  right: var(--kyn-error-right, auto);

  &.sr-only {
    @include visibility.sr-only;
  }

  &.error-text {
    .error-icon {
      display: flex;
      align-items: center;
    }
  }

  [disabled] & {
    color: var(--kd-color-text-level-disabled);

    span svg {
      color: var(--kd-color-text-level-disabled);
    }
  }

  span svg {
    margin-right: 8px;
    display: block;
  }
}

.error-icon {
  color: var(--kd-color-icon-destructive);

  [disabled] & {
    color: var(--kd-color-text-level-disabled);
  }
}

.success-icon {
  color: var(--kd-color-background-success);

  [disabled] & {
    color: var(--kd-color-text-level-disabled);
  }
}

.caption {
  margin-top: 8px;
  cursor: default;
  color: var(--kd-color-text-forms-input-field-text);

  [disabled] &,
  [readonly] & {
    color: var(--kd-color-text-level-disabled);
  }
}

.clear-button {
  transform: translateY(-50%);

  &:not[disabled] {
    cursor: pointer;
  }

  &.dropdown-clear {
    right: 48px;
    width: 24px;
  }

  @include mixins.close-icon-btn($top: 50%, $right: 10px, $size: 16px);
}

.caption-error-count {
  display: flex;
  justify-content: space-between;
  gap: 16px;

  .count {
    @include typography.type-ui-02;
    color: var(--kd-color-text-forms-label-secondary);
    margin-top: 13px;

    [disabled] & {
      color: var(--kd-color-text-level-disabled);
    }
  }
}

.input-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  color: var(--kd-color-text-secondary);
}

.warn {
  display: flex;
  align-items: center;
  margin-top: 8px;
  cursor: default;

  &.warn-text {
    @include typography.type-body-02;
  }

  [disabled] & {
    color: var(--kd-color-text-level-disabled);
  }

  span,
  svg {
    margin-right: 8px;
    display: block;
  }
}

.description-text {
  @include typography.type-body-02;
  color: var(--kd-color-text-level-primary);
  margin-top: -4px;
  margin-bottom: 8px;

  [disabled] & {
    color: var(--kd-color-text-level-disabled);
  }
}