@import "../base";
@import "./config";

.root {
  position: relative;
  padding: $input-padding 0;
  &.with-icon {
    margin-left: $input-icon-size;
  }
}

.icon {
  position: absolute;
  top: $input-icon-offset;
  left: -$input-icon-size;
  display: block;
  width: $input-icon-size;
  height: $input-icon-size;
  font-size: $input-icon-font-size !important;
  line-height: $input-icon-size !important;
  color: $input-text-label-color;
  text-align: center;
  transition: color $animation-duration $animation-curve-default;
}

.input {
  display: block;
  width: 100%;
  padding: $input-field-padding 0;
  font-size: $input-field-font-size;
  color: $color-text;
  background-color: $input-text-background-color;
  border: 0;
  border-bottom: 1px solid $input-text-bottom-border-color;
  outline: none;
  &:focus {
    ~ .bar:before, ~ .bar:after {
      width: 50%;
    }
    ~ .label:not(.fixed) {
      color: $input-text-highlight-color;
    }
    ~ .icon {
      color: $input-text-highlight-color;
    }
  }
  &:focus, &.filled, &[type='date'], &[type='time'] {
    ~ .label:not(.fixed) {
      top: $input-focus-label-top;
      font-size: $input-label-font-size;
    }
  }
  &.filled ~ .label.fixed {
    display: none;
  }
}

.label {
  position: absolute;
  top: $input-padding + (1.5 * $input-field-padding);
  left: 0;
  font-size: $input-field-font-size;
  line-height: $input-field-font-size;
  color: $input-text-label-color;
  pointer-events: none;
  transition-timing-function: $animation-curve-default;
  transition-duration: $animation-duration;
  transition-property: top, font-size, color;
}

.bar {
  position: relative;
  display: block;
  width: 100%;
  &:before, &:after {
    @include material-animation-default();
    position: absolute;
    bottom: 0;
    width: 0;
    height: 2px;
    content: "";
    background-color: $input-text-highlight-color;
    transition-property: width, background-color;
  }
  &:before {
    left: 50%;
  }
  &:after {
    right: 50%;
  }
}

.error {
  display: block;
  font-size: $input-label-font-size;
  line-height: $input-error-height;
  color: $input-text-error-color;
}

.disabled > .input {
  color: $input-text-disabled-text-color;
  border-bottom-style: dotted;
}

.errored {
  padding-bottom: 0;
  > .input {
    border-bottom-color: $input-text-error-color;
    &:focus {
      ~ .label:not(.fixed) {
        color: $input-text-error-color;
      }
      ~ .bar:before, ~ .bar:after {
        background-color: $input-text-error-color;
      }
    }
  }
}

.hidden {
  display: none;
}