@use "@uqds/core/src/scss/global" as core;
@use "@uqds/icon/src/scss/global" as icon;
@use "global" as *;

$use-encapsulation: false !default;

@mixin form-styles {
  form,
  fieldset,
  legend,
  label,
  input,
  select,
  textarea,
  .uq-error-summary,
  .uq-error-message,
  .uq-success-message,
  .uq-inline-help {
    box-sizing: border-box;
    font-family: core.$font-body;
  }

  fieldset,
  legend,
  label,
  input,
  select,
  textarea {
    &::before,
    &::after,
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
  }

  fieldset {
    border: 0;
    padding: 0;
    margin: 0;
  }

  label,
  legend {
    color: core.$grey-900;
    display: block;
    font-size: $form-label-size;
    font-weight: core.$font-weight-bold;
  }

  legend {
    margin-bottom: $form-spacing;
    line-height: core.$line-height-h;
    padding: 0;

    &.uq-legend--error {
      color: core.$error-500;
    }

    .uq-legend__required {
      color: core.$error-500;
    }
  }

  label {
    cursor: pointer;
    line-height: core.$line-height-ui;

    &.uq-label {
      &--inline {
        align-items: center;
        display: inline-flex;
        font-size: core.$font-size-m;
        line-height: core.$line-height;
        margin-bottom: core.$space-l;

        input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
        select,
        textarea,
        + input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
        + select,
        + textarea {
          max-width: none;
          min-width: 200px;
          margin-left: core.$space-m;
          margin-right: core.$space-l;
          width: auto;
        }

        input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
        select,
        textarea {
          margin-top: 0;
          margin-bottom: core.$space-none;
        }
      }

      &--disabled,
      &--readonly {
        color: core.$grey-300;
      }

      &--disabled {
        cursor: not-allowed;
      }

      &--error {
        color: core.$error-500;
      }

      &--success {
        color: core.$success-500;
      }
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    + input:not([type="checkbox"]):not([type="radio"]),
    + select,
    + textarea {
      margin-top: core.$space-s;
    }

    input[type="radio"],
    input[type="checkbox"] {
      + *:not(input):not(select):not(textarea) {
        display: inline-block;
        font-size: core.$font-size-m;
        font-weight: core.$font-weight-normal;
        line-height: $form-checkbox-size;
        margin-bottom: core.$space-m;
        margin-left: core.$space-s;
        margin-right: $form-spacing;
        padding-top: core.$space-xs;
        padding-left: core.$space-l;
        vertical-align: top;
      }

      &[disabled] {
        + *:not(input):not(select):not(textarea) {
          color: core.$grey-300;
        }
      }
    }

    .uq-label__required {
      color: core.$error-500;
    }
  }

  input,
  select,
  textarea {
    &[disabled] {
      cursor: not-allowed;
    }
  }

  .uq-input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  select,
  textarea {
    background-color: core.$white;
    max-width: 100%;
    min-width: 100%;
    padding: 12px $form-spacing;
    border: $form-border-width solid core.$grey-600;
    border-radius: $form-border-radius;
    font-size: $form-text-size;
    color: core.$grey-900;
    line-height: 1;
    height: 48px;
    margin-bottom: core.$space-l;

    &[disabled] {
      color: core.$grey-300;
    }

    &[readonly] {
      &:focus {
        border-color: core.$grey-300;
        box-shadow: 0 0 0 1px core.$grey-300 inset;
      }
    }

    &::placeholder {
      color: core.$grey-500;
    }

    &.uq-input--error,
    &.uq-input--success {
      border-radius: $form-border-radius;

      &:focus {
        border-color: core.$utility-500;
        box-shadow:
          0 2px 0 0 core.$utility-500,
          0 0 0 1px core.$utility-500 inset;
      }
    }

    &.uq-input--error {
      border-color: core.$error-500;
      box-shadow: 0 2px 0 0 core.$error-500;
    }

    &.uq-input--success {
      border-color: core.$success-500;
      box-shadow: 0 2px 0 0 core.$success-500;
    }

    &.uq-input--large {
      padding: 1.15625rem core.$space-l;
      border-radius: core.$space-xs;
    }

    + .uq-error-message,
    + .uq-success-message {
      margin-top: -(core.$space-l);
      border-radius: 0 0 $form-border-radius $form-border-radius;
    }
  }

  select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url(icon.get-icon(
      "standard--chevron-down-sml",
      core.$purple-500
    ));
    background-repeat: no-repeat;
    background-position: right core.$space-xs center;
    padding-right: 2.5rem;
    cursor: pointer;
    line-height: 1.2;
    width: 100%;

    &:focus {
      background-image: url(icon.get-icon(
        "standard--chevron-down-sml",
        core.$utility-500
      ));
    }

    &[multiple] {
      height: auto;
      background-image: none;

      &:focus {
        background-image: none;
      }
    }

    &[disabled] {
      background-image: url(icon.get-icon(
        "standard--chevron-down-sml",
        core.$grey-500
      ));
    }
  }

  textarea {
    height: 4 * $form-element-height;
  }

  input[type="radio"],
  input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    border: $form-checkbox-border-width solid core.$grey-300;
    cursor: pointer;
    height: $form-checkbox-size;
    width: $form-checkbox-size;
    vertical-align: top;
    position: absolute;

    &:focus {
      border-color: core.$utility-500;
      box-shadow: 0 0 0 1px core.$utility-500;
      outline: none;
    }

    + label {
      display: inline-block;
      font-size: core.$font-size-m;
      font-weight: core.$font-weight-normal;
      line-height: core.$line-height-h;
      margin-bottom: core.$space-m;
      margin-left: core.$space-s;
      margin-right: $form-spacing;
      padding-top: core.$space-compressed-xs;
      padding-left: core.$space-l;
      vertical-align: top;
    }

    &:checked {
      border-color: core.$utility-500;

      &:focus {
        border-color: core.$utility-500;
        box-shadow: 0 0 0 1px core.$utility-500;
      }
    }

    &.uq-input--error {
      border-color: core.$error-500;

      &:focus {
        border-color: core.$utility-500;
        box-shadow: 0 0 0 1px core.$utility-500;
      }

      &:checked {
        border-color: core.$error-500;

        &:focus {
          border-color: core.$utility-500;
          box-shadow: 0 0 0 1px core.$utility-500;
        }
      }
    }

    &[disabled] {
      cursor: not-allowed;
      border-color: core.$grey-300;
      background-color: core.$grey-50;

      + label {
        color: core.$grey-300;
      }

      &:checked {
        background-color: core.$grey-300;
      }
    }
  }

  input[type="checkbox"] {
    border-radius: $form-checkbox-border-radius;

    &::after {
      content: "";
      display: block;
      position: absolute;
      background-repeat: no-repeat;
      background-position: center center;
      top: 1px;
      left: 1px;
      height: $form-checkbox-check-size;
      width: $form-checkbox-check-size;
    }

    &:checked {
      background-color: core.$utility-500;

      &::after {
        background-image: url(icon.get-icon("standard--check", core.$white));
        padding: 0px;
      }
    }

    &.uq-input--error {
      &:checked {
        background-color: core.$error-500;
      }
    }
  }

  input[type="radio"] {
    border-radius: 50%;

    &:checked {
      border-width: 2px;

      &::after {
        border-radius: 50%;
        background-color: core.$utility-500;
        content: "";
        display: block;
        position: absolute;
        top: 3px;
        left: 3px;
        height: $form-checkbox-size - 10px;
        width: $form-checkbox-size - 10px;
      }
    }

    &[disabled] {
      &:checked {
        background-color: core.$grey-50;
        &::after {
          background-color: core.$grey-300;
        }
      }
    }

    &.uq-input--error {
      &:checked {
        border-color: core.$error-500;

        &::after {
          background-color: core.$error-500;
        }
      }
    }
  }

  [type="submit"] {
    appearance: none;
  }

  .uq-error-summary {
    background-color: white;
    border: 1px solid core.$error-500;
    border-left-width: core.$space-xs;
    padding: core.$space-m;
    margin-bottom: core.$space-l;

    &__title {
      color: core.$grey-900;
      font-size: core.$font-size-l;
      font-weight: core.$font-weight-bold;
      line-height: core.$line-height-h;
      margin: core.$space-none core.$space-none core.$space-m core.$space-none;
    }

    &_body {
      color: core.$grey-900;
      font-size: core.$space-m;
    }

    &__list {
      color: core.$grey-900;
      font-size: core.$space-m;
      margin: core.$space-none;
      padding-left: core.$space-l;

      &__item {
        margin-bottom: core.$space-xs;
        line-height: core.$line-height;
      }

      a {
        color: core.$error-500;
        text-decoration: underline;
        font-weight: core.$font-weight-normal;
        &:hover,
        &:focus {
          color: core.$error-600;
        }
      }
    }
  }

  .uq-error-message,
  .uq-success-message {
    color: core.$white;
    display: block;
    font-size: core.$font-size-m;
    font-style: normal;
    font-weight: core.$font-weight-normal;
    line-height: core.$line-height;
    margin-bottom: core.$space-l;
    padding: calc(#{core.$space-s} - 1px) core.$space-m core.$space-s
      core.$space-xxxl;
    position: relative;

    &::before {
      content: "";
      display: block;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      height: core.$space-compressed-xl;
      left: core.$space-m;
      margin-right: core.$space-s;
      margin-top: calc(#{- (core.$space-compressed-xl) * 0.5} - 1px);
      position: absolute;
      top: 50%;
      width: core.$space-compressed-xl;
    }
  }

  .uq-error-message {
    background-color: core.$error-500;

    &::before {
      background-image: url(icon.get-icon(
        "standard--exclamation-triangle",
        core.$white
      ));
    }
  }

  .uq-success-message {
    background-color: core.$success-500;

    &::before {
      background-image: url(icon.get-icon(
        "standard--check-circle",
        core.$white
      ));
    }
  }

  .uq-inline-help {
    display: block;
    font-size: $form-description-size;
    margin: 0 0 $form-spacing;
  }
}

@if $use-encapsulation {
  .uq {
    @include form-styles;
  }
} @else {
  @include form-styles;
}