@import '../scss/init.scss';

.textField {
  display: flex;
  flex-direction: column;
  min-height: $s_touchable;
  justify-content: center;
  position: relative;

  &_field {
    @include resetInputField;

    color: $c_text_primary;
    width: 100%;

    padding-bottom: $s_gutter/2;
    border-bottom: 1px solid $c_divider;
    order: 2;


    &:disabled {
      cursor: not-allowed;
      color: $c_text_tertiary;
      border-bottom-style: dashed;
    }

    &[readonly] {
      border-bottom-style: dashed;
    }
  }

  &_line {
    order: 2;
    height: 2px;
    background-color: $c_primary;
    position: relative;
    top: -1px;
    transform: scaleX(0);
    transition: transform 300ms;
  }


  &_field:focus:not([readonly]) + &_line {
    transform: scaleX(1);
  }

  &_field:focus:not([readonly]) + &_line + &_floatingLabel {
    color: $c_primary;
  }

  &_field[required] + &_line + &_floatingLabel {
    &::after {
      content: '*';
    }
  }

  &_hint {
    // @include clipText;
    font-size: $s_font_caption;
    line-height: normal;
    margin-top: 2px;
    order: 3;
    color: $c_primary;
    &:empty {
      display: none;
    }
  }
}

.textField--simple {
  .textField_field {
    padding-right: 36px;
  }

  .textField_clearBtn {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 14px;
  }
}

.textField--floatingLabel {
  padding-top: 16px;

  .textField {
    &_field {
      padding-right: 36px;
    }

    &_floatingLabel {
      position: absolute;
      top: 0;
      color: $c_text_secondary;
      pointer-events: none;
      transition: transform 225ms;
      transform: translateY(16px);
    }

    &_clearBtn {
      position: absolute;
      z-index: 1;
      right: 0;
      bottom: 6px;
    }
  }

  &.is_floating {
    .textField {
      &_floatingLabel {
        font-size: $s_font_caption;
        transform: translateY(0)
      }
    }
  }
}

.textField--floatingLabel.textField--dropDown::after {
  bottom: 5px;
}

.textFieldBtn {
  position: relative;
  &_btn {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: none;
    outline: none;
    border: none;
  }

  .mdIcon { display: none; }

  .textField_clearBtn { display: none; }
}

.textFieldBtn--dropDown {
  position: relative;

  .textField_field {
    padding-right: 24px;
    border-bottom-style: solid;
  }

  &.is_disabled {
    .textFieldBtn_btn {
      cursor: not-allowed;
    }
    .textField_field {
      border-bottom-style: dashed;
    }
  }

  .mdIcon {
    display: flex;
    position: absolute;
    right: 0;
    bottom: $s_gutter/2;
    color: $c_divider;
  }
}