@import '../../style/common.scss';

$fontSize: 14px;
$height: 36px;

.coast-input-wrapper {
  font-size: $fontSize;
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  flex: 1 1 0%;
  user-select: none;
  margin: 4px;
  height: $height;
  position: relative;

  .coast-input-action {
    position: absolute;
    right: 10px;
    color: #999;
    font-size: 20px;
    cursor: pointer;
    height: 100%;

    &:hover {
      color: $colorBlack;
    }
  }

  .coast-label {
    width: auto;
    height: $height;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    padding: 0 8px;
    font-size: inherit;
    background-color: #fafafa;
    color: #888;
    border-top: 1px solid $borderColorGray;
    border-bottom: 1px solid $borderColorGray;

    &.left {
      border-left: 1px solid $borderColorGray;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }

    &.right {
      border-right: 1px solid $borderColorGray;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
    }
  }

  &.coast-input-wrapper-size-mini {
    font-size: 12px;
    height: 28px;
  }

  &.coast-input-wrapper-size-small {
    font-size: 12px;
    height: 32px;
  }

  &.coast-input-wrapper-size-large {
    font-size: 16px;
    height: 40px;
  }

  .coast-input {
    font-family: inherit;
    font-weight: 400;
    border-radius: 5px;
    font-size: inherit;
    padding: 4px 10px;
    background-color: transparent;
    outline: none;
    height: inherit;
    width: 100%;
    min-width: 0;
    color: $colorBlack;
    border: 1px solid $borderColorGray;
    transition: border 0.2s ease 0s, color 0.2s ease 0s;

    &.coast-input-suffix-clear,
    &.coast-input-suffix-password {
      padding-right: 35px;
    }

    &.coast-input-suffix-clear.coast-input-suffix-password {
      padding-right: 55px;
    }

    &.coast-input-status-secondary {
      border-color: $theme;

      &:focus {
        border-color: $colorGray;
      }
    }

    &.coast-input-status-warning {
      border-color: $warning;

      &:focus {
        border-color: darken($warning, 15%);
      }
    }

    &.coast-input-status-error {
      color: $error;
      border-color: $error;

      &:focus {
        border-color: darken($error, 15%);
      }
    }

    &.coast-input-status-success {
      border-color: $success;

      &:focus {
        border-color: darken($success, 15%);
      }
    }

    &.coast-input-label-left {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &.coast-input-label-right {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &::selection {
      background-color: $selectionBGColor;
      color: $colorBlack;
    }

    &::-moz-selection {
      background: $selectionBGColor;
      color: $colorBlack;
    }

    &::placeholder {
      color: $placeholderColor;
    }

    &:focus {
      border-color: $borderColorFocus;
    }

    &:disabled {
      cursor: not-allowed;
      background-color: $disabledBGColor;
      color: $disabledColor;
    }
  }
}