@use "sass:color";
@use "./../helpers" as *;
@use "./../variables" as *;
@use "./../functions" as *;
@use "./../mixins/breakpoints" as *;

::placeholder {
  color: var(--gray-3);
}

.form--field {
  margin-bottom: var(--spacer);

  & .small,
  & small {
    color: $medium;
    display: block;
    margin-top: calc(var(--spacer) * 0.25);
  }
}

%input {
  --input-color: var(--html-color);
  --input-hover-color: var(--html-color);
  --input-focus-color: var(--html-color);
  --input-active-color: var(--html-color);
  --input-disabled-color: hsl(from var(--html-color) h s l / #{$color-disabled-alpha});
  --input-border-color: var(--border-color-main);
  --input-hover-border-color: var(--border-color-hover-main);
  --input-focus-border-color: var(--border-color-focus-main);
  --input-active-border-color: var(--border-color-active-main);
  --input-disabled-border-color: var(--border-color-disabled-main);
  --input-background: var(--white);
  --input-hover-background: var(--white);
  --input-focus-background: var(--white);
  --input-active-background: var(--white);
  --input-disabled-background: hsl(from var(--html-color) h s l / 5%);
  --input-detail-background: var(--primary);
  --input-disabled-detail-background: hsl(from var(--primary) h s l / #{$color-disabled-alpha});
  --input-box-shadow: 0 0 0 0.125em transparent;
  --input-hover-box-shadow: 0 0 0 0.125em transparent;
  --input-focus-box-shadow: 0 0 0 0.125em hsl(from var(--html-color) h s l / 20%);
  --input-active-box-shadow: 0 0 0 0.125em hsl(from var(--html-color) h s l / 20%);
  --input-disabled-box-shadow: 0 0 0 0.125em transparent;

  // Static
  --input-padding-x: #{$input-padding-x};
  --input-padding-y: #{$input-padding-y};
  --input-small-padding-x: #{$input-small-padding-x};
  --input-small-padding-y: #{$input-small-padding-y};
  --input-large-padding-x: #{$input-large-padding-x};
  --input-large-padding-y: #{$input-large-padding-y};
  --input-border-width: 1px;
  --input-border-style: solid;
  --input-border-radius: #{$input-border-radius};
  --input-small-border-radius: #{$input-small-border-radius};
  --input-large-border-radius: #{$input-large-border-radius};
  --input-round-border-radius: #{$input-round-border-radius};
  --input-font-weight: #{$input-font-weight};
  --input-line-height: #{$input-line-height};
  --input-white-space: #{$input-white-space};
  --input-width: 100%;
  --input-height: auto;
  --input-desktop-width: 100%;
  --input-desktop-height: auto;
  --input-font-size: #{$input-font-size};

  color: var(--input-color);
  border-width: var(--input-border-width);
  border-style: var(--input-border-style);
  border-color: var(--input-border-color);
  background: var(--input-background);
  box-shadow: var(--input-box-shadow);
  padding: var(--input-padding-y) var(--input-padding-x);
  border-radius: var(--input-border-radius);
  font-weight: var(--input-font-weight);
  font-size: var(--input-font-size);
  line-height: var(--input-line-height);
  white-space: var(--input-white-space);
  width: var(--input-width);
  height: var(--input-height);
  display: block;
  appearance: none;
  transition: $form-transition;
  position: relative;

  @include media-breakpoint-up("desktop") {
    height: var(--input-desktop-height);
    width: var(--input-desktop-width);
  }

  &:hover {
    color: var(--input-hover-color);
    border-color: var(--input-hover-border-color);
    background: var(--input-hover-background);
    box-shadow: var(--input-hover-box-shadow);
  }

  &:focus {
    color: var(--input-focus-color);
    border-color: var(--input-focus-border-color);
    background: var(--input-focus-background);
    box-shadow: var(--input-focus-box-shadow);
    outline: 0;
  }

  &:active {
    color: var(--input-active-color);
    border-color: var(--input-active-border-color);
    background: var(--input-active-background);
    box-shadow: var(--input-active-box-shadow);
  }

  &:disabled,
  &.disabled,
  fieldset:disabled & {
    color: var(--input-disabled-color);
    border-color: var(--input-disabled-border-color);
    background: var(--input-disabled-background);
    box-shadow: var(--input-disabled-box-shadow);
    opacity: 1;
  }

  &[readonly] {
    background: var(--input-disabled-background);
  }

  &.input--rounded {
    border-radius: var(--input-round-border-radius);
  }

  &.input--small {
    --input-font-size: #{$input-small-font-size};

    padding: var(--input-small-padding-y) var(--input-small-padding-x);

    &:not(.input--rounded) {
      border-radius: var(--input-small-border-radius);
    }
  }

  &.input--large {
    --input-font-size: #{$input-large-font-size};

    padding: var(--input-large-padding-y) var(--input-large-padding-x);

    &:not(.input--rounded) {
      border-radius: var(--input-large-border-radius);
    }
  }

  @each $key, $value in $all-colors {
    &.input--#{$key} {
      --input-color: var(--#{$key});
      --input-hover-color: var(--#{$key});
      --input-focus-color: var(--#{$key});
      --input-active-color: var(--#{$key});
      --input-disabled-color: hsl(from var(--#{$key}) h s l / #{$color-disabled-alpha});
      --input-border-color: var(--#{$key});
      --input-hover-border-color: hsl(color-mix(in oklab, var(--#{$key}), #000 #{$border-shade-percentage}));
      --input-focus-border-color: hsl(color-mix(in oklab, var(--#{$key}), #000 #{$border-shade-percentage}));
      --input-active-border-color: hsl(color-mix(in oklab, var(--#{$key}), #000 #{$border-shade-percentage}));
      --input-disabled-border-color: hsl(from var(--#{$key}) h s l / #{$color-disabled-alpha});
      --input-background: var(--white);
      --input-hover-background: var(--white);
      --input-focus-background: var(--white);
      --input-active-background: var(--white);
      --input-disabled-background: hsl(from var(--#{$key}) h s l / 5%);
      --input-box-shadow: 0 0 0 0.125em transparent;
      --input-hover-box-shadow: 0 0 0 0.125em transparent;
      --input-focus-box-shadow: 0 0 0 0.125em hsl(from var(--#{$key}) h s l / 20%);
      --input-active-box-shadow: 0 0 0 0.125em hsl(from var(--#{$key}) h s l / 20%);
      --input-disabled-box-shadow: 0 0 0 0.125em transparent;
    }
  }
}

input,
textarea,
output,
select,
progress,
.form__span,
.form__input {
  @extend %input;
}

.form__label {
  display: $label-display;
  padding: $label-padding;
  margin: $label-margin;
  font-weight: $label-font-weight;
  text-transform: $label-text-transform;
  font-size: $label-font-size;
  color: $label-color;
  cursor: pointer;
}

.form__control {
  box-sizing: border-box;
  clear: both;
  position: relative;
  text-align: left;
  display: block;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;

  &.checkbox,
  &.radio,
  &.toggle {
    display: flex;

    &:not(.stacked) {
      flex-direction: row;
      align-items: center;

      & .form__label {
        padding: 0;
      }
    }

    &.stacked {
      & .form__label {
        order: -1;
      }
    }
  }
}

.form__span {
  --input-background: color-mix(in oklab, var(--html-color), #fff 85%);
  --input-hover-background: color-mix(in oklab, var(--html-color), #fff 85%);
  --input-focus-background: color-mix(in oklab, var(--html-color), #fff 85%);
  --input-active-background: color-mix(in oklab, var(--html-color), #fff 85%);
  --input-disabled-background: color-mix(in oklab, var(--html-color), #fff 85%);
  --input-border-color: var(--border-color-main);
  --input-hover-border-color: var(--border-color-main);
  --input-focus-border-color: var(--border-color-main);
  --input-active-border-color: var(--border-color-main);
  --input-box-shadow: none;
  --input-hover-box-shadow: none;
  --input-focus-box-shadow: none;
  --input-active-box-shadow: none;
  --input-disabled-box-shadow: none;

  align-items: center;
  display: inline-flex;
  vertical-align: top;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  outline: 0;
  text-decoration: none;
}