@import "settings.global";

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

@mixin field {
  padding: $field-padding;
  outline: 0;
  display: block;
  width: 100%;
  margin: $field-margin;
  font-size: $field-font-size-medium;
  font-weight: $field-font-weight;
  font-family: inherit;
  background-color: $field-background-color;
  border: $field-border;
  border-radius: $field-border-radius;
  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;
  background-color: $field-disabled-background-color;
  border-color: $field-disabled-border-color;
}

@mixin field--error {
  border-color: $field-error-border-color;
  color: $field-error-color;
}

@mixin field--success {
  border-color: $field-success-border-color;
  color: $field-success-color;
}

@mixin field--super {
  font-size: $field-font-size-super;
}

@mixin field--xlarge {
  font-size: $field-font-size-xlarge;
}

@mixin field--large {
  font-size: $field-font-size-large;
}

@mixin field--medium {
  font-size: $field-font-size-medium;
}

@mixin field--small {
  font-size: $field-font-size-small;
}

@mixin field--xsmall {
  font-size: $field-font-size-xsmall;
}

@mixin choice {
  padding: $choice-padding;
  margin: $choice-margin;
  outline: 0;
  display: block;
  font-size: $choice-font-size-medium;
  cursor: pointer;
  appearance: none;

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

@mixin choice--disabled {
  @include disabled;
}

@mixin choice--error {
  color: $choice-error-color;
}

@mixin choice--success {
  color: $choice-success-color;
}

@mixin choice--super {
  font-size: $choice-font-size-super;
}

@mixin choice--xlarge {
  font-size: $choice-font-size-xlarge;
}

@mixin choice--large {
  font-size: $choice-font-size-large;
}

@mixin choice--medium {
  font-size: $choice-font-size-medium;
}

@mixin choice--small {
  font-size: $choice-font-size-small;
}

@mixin choice--xsmall {
  font-size: $choice-font-size-xsmall;
}

@mixin select {
  @include choice;
  outline: 0;
  appearance: menulist;
  height: 2.5em;

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

@mixin select--disabled {
  @include field--disabled;
}

@mixin select--error {
  @include field--error;
}

@mixin select--success {
  @include field--success;
}

@mixin checkbox {
  outline: 0;
  margin-right: $checkbox-margin;
  font-size: $checkbox-font-size;

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

@mixin input-group {
  display: flex;
}

@mixin input-group__field {
  flex: 1;
  height: 100%;
}

@mixin input--grouped {
  border-radius: 0;
}

@mixin input-group__field--center {
  border-right: 0;
  border-left: 0;
}

@mixin input-group__field--left {
  border-bottom-left-radius: $border-radius;
  border-top-left-radius: $border-radius;
  border-right: 0;
}

@mixin input-group__field--right {
  border-bottom-right-radius: $border-radius;
  border-top-right-radius: $border-radius;
  border-left: 0;
}

@mixin input-group__button--left {
  border-bottom-left-radius: $border-radius;
  border-top-left-radius: $border-radius;
  border-width: 1px;
}

@mixin input-group__button--right {
  border-bottom-right-radius: $border-radius;
  border-top-right-radius: $border-radius;
  border-width: 1px;
}

@mixin input-group-rounded--left {
  border-bottom-left-radius: $border-radius-rounded;
  border-top-left-radius: $border-radius-rounded;
}

@mixin input-group-rounded--right {
  border-bottom-right-radius: $border-radius-rounded;
  border-top-right-radius: $border-radius-rounded;
}

@mixin field-group {
  display: block;
}

@mixin field-group__field--center {
  border-radius: 0;
}

@mixin field-group__field--top {
  border-radius: $field-border-radius $field-border-radius 0 0;
}

@mixin field-group__field--bottom {
  border-radius: 0 0 $field-border-radius $field-border-radius;
}

@mixin field-group__field {
  border-top: 0;
}

@mixin field-group-inline {
  display: flex;
}

@mixin field-group-inline__field--center {
  border-radius: 0;
}

@mixin field-group-inline__field--left {
  border-radius: $field-border-radius 0 0 $field-border-radius;
}

@mixin field-group-inline__field--right {
  border-radius: 0 $field-border-radius $field-border-radius 0;
}

@mixin field-group-inline__field {
  border-left: 0;
}

@mixin fieldset {
  display: block;
  width: $fieldset-width;
  border: $fieldset-border;
  padding: $fieldset-padding;
  margin: $fieldset-margin;
}

@mixin fieldset__legend {
  @include label;
  padding: $legend-padding;
}

@mixin fieldset--disabled {
  @include field--disabled;
}

@mixin form-element {
  padding: $form-element-padding;
  position: relative;
}

@mixin form-element-label {
  padding: $form-element-label-padding;
}