// FIXME Move variables into theme
$border: 1px solid $frost-color-input-border;
$color: $frost-color-input;
$error-border: 1px solid $frost-color-input-error-border;
$focus-border: 1px solid $frost-color-input-focus-border;
$hover-border: 1px solid $frost-color-input-hover-border;
$disabled-border: 1px solid $frost-color-input-disabled-border;
$disabled-bg: $frost-color-input-disabled-bg;
$font-size: $frost-font-m;
$height: 35px;
$padding: 0 30px 0 8px;

.frost-text {
  display: block;
  position: relative;
  min-width: 175px;

  &.is-clear-visible {
    .frost-text-clear {
      opacity: 1;
    }
  }

  &.is-clear-enabled {
    .frost-text-clear {
      cursor: pointer;
      pointer-events: auto;
    }
  }

  &.error {
    .frost-text-input {
      border: $error-border;

      &:hover {
        &:enabled {
          &:read-write {
            &:not(:focus) {
              border: $error-border;
            }
          }
        }
      }
    }
  }
}

.frost-text-input {
  display: inline-block;
  width: 100%;
  height: $height;
  padding: $padding;
  transition: border .2s ease;
  border: $border;
  outline: none;
  color: $color;
  font-size: $font-size;
  font-weight: 200;

  &.right {
    text-align: right;
  }

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

  &:read-only {
    border: 0;
  }

  // Note: without this Firefox ends up applying the read-only pseudo selector
  // to number inputs which causes them not to get a border.
  &[type='number'] {
    border: 1px solid $frost-color-input-border;
  }

  &:disabled {
    border: $disabled-border;
    background-color: $disabled-bg;
  }

  &:hover {
    &:enabled {
      &:read-write {
        &:not(:focus) {
          border: $hover-border;
        }
      }
    }
  }
}

.frost-text-clear {
  display: inline-block;
  position: absolute;
  top: 7px;
  right: 5px;
  width: 23px;
  height: 23px;
  transition: opacity .2s ease;
  opacity: 0;
  fill: $frost-color-grey-6;
  pointer-events: none;

  &:focus {
    outline: none;
  }
}