@import '../style/functions.scss';
@import '../style/theme.scss';
@import '../style/mixins.scss';

$prefix-cls: 'dk-input';

.#{$prefix-cls} {
  @include reset-component();
  display: inline-block;
  width: $input-width;
  height: $input-height;
  padding: $input-padding-y $input-padding-x;
  color: $input-color;
  background-color: $input-bg;
  background-clip: padding-box;
  border: 1px solid $input-border-color;
  border-radius: $border-radius;
  transition: $input-transition;

  &:focus {
    background-color: $input-focus-bg;
    border-color: $input-focus-border-color;
    box-shadow: $input-focus-box-shadow;
  }

  &:hover {
    border-color: $input-hover-border-color;
  }

  &-small {
    height: $input-height-sm;
    font-size: $font-size-sm;
  }

  &-large {
    height: $input-height-lg;
    font-size: $font-size-lg;
  }

  @each $type,
  $color in $input-type-colors {
    &-#{$type} {
      @include input-variant($color);
    }
  }

  &::placeholder {
    color: $input-placeholder-color;
    opacity: 1;
  }
  &:disabled,
  &[readonly] {
    background: $input-disabled-bg;
    opacity: $input-disabled-opacity;
    border-color: $input-disabled-border-color;
    pointer-events: none;
  }

  &-wrapper {
    @include reset-component();
    display: inline-block;
    position: relative;
    width: $input-width;
    color: $input-color;

    > .#{$prefix-cls} {
      width: 100%;
    }
  }

  &-prefix {
    padding-left: 30px;
  }
  &-suffix {
    padding-right: 30px;
  }

  &-prefix-icon,
  &-suffix-icon {
    position: absolute;
    width: $input-icon-size;
    height: $input-icon-size;
    top: 50%;
    margin-top: -$input-icon-size / 2;
    font-size: $input-icon-size;
    color: $input-icon-color;
    user-select: none;
    z-index: 1;
  }

  &-prefix-icon {
    left: 10px;
  }
  &-suffix-icon {
    right: 10px;
  }
}