/**
 * Form Element Inputs
 */
@use 'variables';
@use '../forms/variables' as forms;
@use '../colors/shadow-variables' as shadows;

input[type='number'],
input[type='tel'],
input[type='text'],
input[type='password'],
textarea {
  display: inline-block;
  box-sizing: border-box;
  outline: none;
}

.form-input {
  background: forms.$color-input-bg;
  border: solid 1px forms.$color-input-border;
  color: forms.$color-input-text;
  transition: box-shadow 200ms;
  border-radius: 0;
  font-size: 13px;
  height: 32px;
  line-height: 32px;
  width: 100%;
  padding: 6px;
  margin-bottom: 1em;

  &::placeholder {
    color: forms.$color-input-text-placeholder;
  }

  &:focus {
    box-shadow: shadows.$shadow-2;
    // border-color: colors.$color-blue;
    // box-shadow: 0 3px 25px rgba(31, 137, 255, 0.25),
    //             0 3px 6px rgba(31, 137, 255, 0.12);
  }

  &[disabled] {
    cursor: not-allowed;
    color: forms.$color-input-text-disabled;
  }
}

textarea.form-input {
  min-height: 120px;
  line-height: 1.3em;
}