@import '../../styles/common/colors';
@import '../../styles/common/screen';

.input-component {
  position: relative;

  label {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
    color: $navy-text;
    font-weight: 200;
  }

  .input-container {
    align-items: center;
    display: flex;
    position: relative;

    .prefix, .suffix {
      color: $primary-4;
      line-height: 0;
      position: absolute;
    }

    .prefix {
      left: 16px;
    }

    .suffix {
      right: 16px;
    }

    input {
      color: $primary-4;
      border: solid 2px $neutral-3;
      border-radius: 3px;
      box-sizing: border-box;
      font-size: 14px;
      padding: 10px;
      width: 100%;
      transition: border-color ease-in-out .15s;

      &:disabled {
        background-color: rgba($neutral-3, .6);
        cursor: not-allowed;

        &:hover {
          border: solid 2px $neutral-3;
        }
      }

      &.fill {
        width: 100%;
      }
    }
  }

  &.input-error {
    input {
      border: 2px solid $danger;

      &:focus {
        outline: 0;
      }  
    }
  }

  &:not(.input-error) {
    input:hover {
      border-color: rgba($neutral-4, .4);
    }

    input:focus {
      border-color: rgba($neutral-4, .6);
      outline: 0;
    }
  }

}