@import '../../variables.scss';

#{$biz-css-prefix}-input {
  position: relative;
  width: 100%;
  padding-top: 4px;
  padding-bottom: 3px;
  padding-left: 0px;
  padding-right: 10px;
  border-bottom: 1px solid var(--color-gray-30);
  font-size: 16px;
  display: flex;

  .inner-content {
    flex-grow: 1;
  }

  .inner-input {
    color: var(--color-gray-90);
    background: transparent;
    border: none;
    width: 100%;
    font-size: 14px;
    vertical-align: 0px;
    padding-right: 22px;
    outline: none;

    &:disabled {
      color: var(--color-gray-50);
      background: transparent;
    }
  }

  .inner-label {
    margin-right: 20px;
    text-align: right;
    min-width: 60px;
  }

  .required-title {
    color: var(--color-error-50);
    margin: 3px 1px;
  }

  .icon-times-circle {
    font-size: 18px;
    position: absolute;
    right: 10px;
    top: 14px;
    color: var(--color-gray-40);
  }

  &.au-input-separate {
    display: block;
    .inner-label {
      display: block;
      margin-bottom: 8px;
    }
    .inner-content {
      width: 100%;
    }
    .inner-input {
      display: block;
      margin-bottom: 2px;
    }
    .icon-times-circle {
      top: 46px;
    }
    .inner-label {
      text-align: left;
    }
  }

  &.au-input-left {
    .inner-input {
      text-align: left;
    }
  }

  &.au-input-center {
    .inner-input {
      text-align: center;
    }
  }

  &.au-input-right {
    .inner-input {
      text-align: right;
    }
  }

  &-error {
    .inner-input {
      color: var(--color-error-50);
    }

    .icon-exclamation-circle {
      font-size: 18px;
      position: absolute;
      right: 10px;
      top: 13px;
      color: var(--color-error-50);
    }

    &.au-input-separate {
      .icon-exclamation-circle {
        top: 48px;
      }
    }
  }
}

input::-webkit-input-placeholder {
  color: var(--color-gray-40);
}