// Label
label {
  clear: both;
  display: block;
  font-weight: $weight-bold;
  font-size: $small-font-size;
  margin-bottom: $base-spacing / 4;
}


// Text inputs
input[type="email"], input[type="number"],   input[type="password"], input[type="search"],
input[type="tel"],   input[type="text"],     input[type="url"],      input[type="color"],
input[type="date"],  input[type="datetime"], input[type="datetime-local"],
input[type="month"], input[type="time"],     input[type="week"], textarea {
  background: $white;
  color: $black;
  border: 1px solid $gray;
  border-radius: $base-border-radius;
  font-family: $base-font-family;
  font-size: $medium-font-size;
  width: 100%;
  padding: ($base-spacing / 2) $base-spacing;
  margin-bottom: $base-spacing * 2;

  &:focus {
    border: 1px solid $cyan;
    outline: none;
  }
}

textarea {
  resize: vertical;
}


// Server-side validation errors
.validation.error {
  color: $error-color;
  font-size: $small-font-size;
  font-weight: $weight-semibold;
}

// Label
label {
  clear: both;
  display: block;
  font-weight: $weight-bold;
  font-size: $small-font-size;
  margin-bottom: $base-spacing / 4;
}


// Text inputs
input[type="email"], input[type="number"],   input[type="password"], input[type="search"],
input[type="tel"],   input[type="text"],     input[type="url"],      input[type="color"],
input[type="date"],  input[type="datetime"], input[type="datetime-local"],
input[type="month"], input[type="time"],     input[type="week"], textarea {
  background: $white;
  color: $black;
  border: 1px solid $gray;
  border-radius: $base-border-radius;
  font-family: $base-font-family;
  font-size: $medium-font-size;
  width: 100%;
  padding: ($base-spacing / 2) $base-spacing;
  margin-bottom: $base-spacing * 2;

  &:focus {
    border: 1px solid $cyan;
    outline: none;
  }

  &:disabled, &.disabled {
    background: transparent;
  }
}

textarea {
  resize: vertical;
}


// File input
input[type="file"] {
  margin-bottom: $base-spacing * 2;
}


// Select boxes
select {
  margin-bottom: $base-spacing * 2;
}


// Server-side validation errors
.validation.error {
  color: $error-color;
  font-size: $small-font-size;
  font-weight: $weight-semibold;
}

Add basic styles for disabled, file input, and select inputs.
Add basic styles for disabled, file input, and select inputs.
