@use '../../../styles/tools' as *;
@use '../../settings/variables' as theme-variables;
@use '../../../icons' as icons;

ion-item.item-textarea,
ion-item.item-input {
  --background: var(--sd-input-background-color);
  --border-radius: var(--sd-border-radius-default);
  --border-color: var(--sd-input-border-color);
  --border-color-focus: var(--sd-input-border-focused-color);
  --color: var(--sd-input-color);
  --caret-color: var(--sd-input-caret-color);
  --height: var(--sd-input-height);
  --inner-height: var(--sd-input-inner-height);
  --icon-color: var(--sd-input-icon-color);
  --outline-color: var(--sd-input-outline-color);
  --inner-padding-end: 0px;
  --padding-inline: var(--sd-input-inline-padding);
  --padding-bottom: var(--sd-input-padding-bottom);
  --padding-end: var(--sd-input-padding-end);
  --padding-start: var(--sd-input-padding-start);
  --padding-top: var(--sd-input-padding-top);

  i[slot="end"] {
    --icon-color: var(--sd-input-icon-hint-color);
  }

  ion-textarea, textarea, ion-input {
    --placeholder-color: var(--sd-input-placeholder-color);
    --placeholder-opacity: var(--sd-input-placeholder-opacity);
    --padding-start: 0;
    --padding-end: 0;
    --padding-top: 0;
    --padding-bottom: 0;
  }

  &.item-has-focus {
    --border-color: var(--border-color-focus) !important;
  }
}

ion-item.item-textarea,
ion-item.item-input {
  @include shadow(xs);
  @include typography(text-md, regular, important);
  text-align: start;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color);
  border-radius: var(--border-radius);
  outline-width: 0px;
  outline-style: solid;
  outline-color: var(--outline-color);
  margin: 6px 0;
  transition: all .1s ease-out !important;

  &.ion-invalid {
    --border-color: var(--sd-input-error-border-color) !important;
    --outline-color: var(--sd-input-error-outline-color) !important;
    --caret-color: var(--sd-input-error-caret-color) !important;
    .icon-alert-circle {
      --icon-color: var(--sd-input-error-icon-hint-color);
    }
  }

  i {
    color: var(--icon-color);
  }

  i[slot="start"] {
    font-size: 20px !important;
    margin-right: var(--padding-inline);
  }

  i[slot="end"] {
    font-size: 16px !important;
    margin-left: var(--padding-inline);
  }

  .input-clear-icon {
    @include icons.icon('icon-x');
    color: var(--icon-color);
    font-size: 20px !important;
    height: var(--inner-height);
    width: var(--inner-height);

    ion-icon {
      display: none;
    }
  }
  
  
  ion-textarea, textarea, ion-input {
    caret-color: var(--caret-color);
    border: none;
    margin: 0;
  }

  input {
    border-radius: none;
    max-height: var(--inner-height) !important;
  }

  &.item-has-focus {
    outline-width: 4px;
    transition: all .1s ease-in !important;
  }
}

input::placeholder {
  opacity: var(--sd-input-placeholder-opacity) !important;
}