@import "settings.global";

@mixin label {
  display: block;
  width: 100%;
  padding: $label-padding;
  cursor: pointer;
}

@mixin field {
  display: block;
  width: 100%;
  margin: $field-margin;
  padding: $field-padding;
  border: $field-border;
  border-radius: $field-border-radius;
  outline: 0;
  background-color: $field-background-color;
  font-family: inherit;
  font-size: $field-font-size-medium;
  font-weight: $field-font-weight;
  resize: vertical;
  appearance: none;

  &:focus {
    border-color: $field-focus-border-color;
    box-shadow: $field-focus-box-shadow;
  }
}

@mixin label__field {
  @include field;
  margin: $label-field-margin;
}

@mixin disabled {
  color: $field-disabled-color;
  cursor: not-allowed;
}

@mixin field--disabled {
  @include disabled;
  border-color: $field-disabled-border-color;
  background-color: $field-disabled-background-color;
}