@use '../../_styles/variables' as *;
@use "pkg:@ohu-mobile/styles" as *;
@use '../../_styles/mixins' as *;

$inputPrefixClass: #{$prefix}input;

.#{$inputPrefixClass} {
  box-sizing: border-box;
  font-size: $inputFontSize;
  font-weight: normal;
  color: $inputColor;
  border: 0;
  display: inline-flex;
  align-items: center;
  &.has-border.is-normal {
    @include hair-border($inputBorderColor, all, $inputBorderRadius);
  }
  &.has-border.is-outline {
    border-style: solid;
    @include hair-border($inputBorderColor, bottom);
  }
  &.is-normal {
    padding: $inputPadding;
    border-radius: $inputBorderRadius;
    &.is-focus {
      &::after {
        border: 2Px solid $inputFocusBorderColor;
      }
    }
    &.has-start-adornment {
      padding: $inputPaddingWithAdornment;
    }
  }
  &.is-outline {
    padding: $inputOutlinePadding;
    &.is-focus {
      &::after {
        border: 1Px solid $inputFocusBorderColor;
      }
    }
    &.has-start-adornment {
      padding: $inputOutlinePaddingWithAdornment;
    }
    &.is-disabled {
      border-style: dashed;
    }
  }
  &.is-disabled {
    cursor: not-allowed;
    opacity: .4;
    input[disabled] {
      cursor: not-allowed;
    }
  }
  &__base {
    box-sizing: border-box;
    font: inherit;
    border: 0;
    margin: 0;
    padding: 0;
    background: none;
    display: block;
    width: 100%;
    color: $inputColor;
    -webkit-tap-highlight-color: transparent;
    &::placeholder {
      color: $inputPlaceholderColor;
    }
    &:focus {
      outline: 0;
    }
    & ~ .#{$inputPrefixClass}__adornment {
      margin-left: $inputAdornmentMargin;
    }
  }
  input {
    line-height: $inputLineHeight;
  }
  textarea {
    height: auto;
    resize: none;
    line-height: $inputTextAreaLineHeight;
  }
  &__adornment {
    flex-shrink: 0;
    width: 1.5em;
    height: 1.5em;
    color: $inputAdornmentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    outline: 0;
    > .#{$prefix}icon {
      font-size: 1.125em;
    }
    span {
      font-size: $inputAdornmentFontSize;
    }
    > .#{$prefix}btn.is-link {
      flex-shrink: 0;
      font-size: 1em;
      color: $inputAdornmentColor;
      i {
        font-size: 1.125em;
      }
    }
    & ~ .#{$inputPrefixClass}__base {
      margin-left: $inputAdornmentMargin;
    }
    &.is-auto {
      width: auto;
    }
  }
}