$border: 1px solid $frost-color-input-border;
$error-border: 1px solid $frost-color-input-error-border;
$error-margin: 1px; // Note: margin + border width equals border width of focus state
$focus-border: 1px solid $frost-color-input-focus-border;
$hover-border: 1px solid $frost-color-input-focus-border;
$disabled-border: 1px solid $frost-color-input-disabled-border;
$disabled-bg: $frost-color-input-disabled-bg;

.frost-textarea {
  display: flex;
  position: relative;

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

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

  &.error {
    .frost-textarea-input {
      margin: $error-margin;
      border: $error-border;
      color: $frost-color-danger;

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

.frost-textarea-input {
  padding: 5px;
  padding-right: 30px;
  border: $border;
  color: $frost-color-grey-1;
  font-size: $frost-font-s;
  resize: none;

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

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

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

  &:read-only {
    border: 0;
    cursor: default;
  }
}

.frost-textarea-clear {
  position: relative;
  top: 7px;
  right: 26px;
  width: 23px;
  height: 23px;
  transition: opacity .2s ease;
  opacity: 0;
  fill: $frost-color-grey-6;
  pointer-events: none;

  &:focus {
    outline: none;
  }
}