@import '../../style/variables';
@import './mixin';

.#{$prefix}input {
  position: relative;
  font-family: $font-family;
  box-sizing: border-box;
  color: $input-font-color;

  &__input {
    @include input-default();
  }

  &__prefix,
  &__suffix {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    margin: 0 8px;
  }

  &__prefix {
    left: 0;
  }

  &__suffix {
    right: 0;
  }

  &__clear-btn {
    display: inline-block;
    color: rgba(0, 0, 0, 0.25);
    width: 14px;
    height: 14px;
    position: relative;
    top: 2px;
    cursor: pointer;
  }

  &_sm {
    .#{$prefix}input {
      &__input {
        font-size: $input-sm-font-size;
        height: $input-sm-height;
        line-height: $input-sm-height;
      }

      &__clear-btn {
        transform: scale(0.7);
      }
    }
  }

  &_md {
    .#{$prefix}input {
      &__input {
        font-size: $input-md-font-size;
        height: $input-md-height;
        line-height: $input-md-height;
      }

      &__clear-btn {
        transform: scale(0.8);
      }
    }
  }

  &_lg {
    .#{$prefix}input {
      &__input {
        font-size: $input-lg-font-size;
        height: $input-lg-height;
        line-height: $input-lg-height;
      }
    }
  }

  &_disabled {
    .#{$prefix}input__input {
      @include input-default-disabled();
    }
  }
}

.#{$prefix}input-group {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  position: relative;

  & > .#{$prefix}input-group-addon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &_sm {
    height: $input-sm-height;
  }

  &_md {
    height: $input-md-height;
  }

  &_lg {
    height: $input-lg-height;
  }

  .#{$prefix}input {
    z-index: 1;
    flex: 1;

    &:first-child {
      .#{$prefix}input__input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    &:last-child {
      .#{$prefix}input__input {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    &:not(:first-child):not(:last-child) {
      .#{$prefix}input__input {
        border-radius: 0;
      }
    }
  }
}

.#{$prefix}input-group-addon {
  background-color: #fafafa;
  border: 1px solid #d9d9d9;
  box-sizing: border-box;
  text-align: center;
  line-height: 1;
  border-radius: $input-border-radius;
  color: $input-font-color;
  padding: 0 7px;

  &_sm {
    font-size: $input-sm-font-size;
  }

  &_md {
    font-size: $input-md-font-size;
  }

  &_lg {
    font-size: $input-lg-font-size;
  }

  &:first-child {
    border-right: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }

  &:last-child {
    border-left: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }

  &:not(:first-child):not(:last-child) {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 0 7px;
  }

  &_no-border {
    border: none;
    padding: 0;
  }
}