@use "../../config" as *;
@use "../../spacing" as *;
@use "../../motion" as *;
@use "../../type" as *;
@use "../../breakpoint" as *;
@use "../../theme" as *;
@use "../../utilities/component-reset";
@use "../../utilities/convert" as *;
@use "../../utilities/focus-outline" as *;
@use "../../utilities/high-contrast-mode" as *;
@use "../../utilities/skeleton" as *;
@use "../../utilities/input-base" as *;
@use "../form";

/// Select styles
/// @access public
/// @group select

$input-height: 40px !default;
$input-border: 1px solid var(--neutral-100__color);

@mixin select {
  .#{$prefix}--select {
    @include reset;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    order: 2;
  }

  .#{$prefix}--select-input {
    @include input-base;
    height: $input-height;
    appearance: none;
    display: block;
    min-width: none;
    width: 100%;
    padding: 0 $spacing-06 0 $spacing-03;
    color: $text-body-default;
    background-color: $fill-field;
    border: $input-border;
    order: 2;
    border-radius: 0;
    cursor: pointer;
    //font-size: $typography-body-copy-16px-regular-font-size;

    // Hide default select arrow in IE10+
    &::-ms-expand {
      display: none;
    }

    & ~ .#{$prefix}--label {
      order: 1;
    }

    &:focus {
      @include focus-outline("border");
    }

    &:focus ~ .#{$prefix}--label {
      color: $focus;
    }

    &[data-invalid]:focus ~ .#{$prefix}--label {
      color: $support-error-main;
    }

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

    ~ .#{$prefix}--form-requirement {
      order: 3;
      color: $text-error;
      font-weight: 400;
      margin-top: $spacing-02;

      &::before {
        display: none;
      }
    }
  }

  .#{$prefix}--select--light .#{$prefix}--select-input {
    background: var(--field-02);
  }

  .#{$prefix}--select__arrow {
    position: absolute;
    top: 0em;
    right: 0.7em;
    height: 100%;
    color: $action-default-fill-primary-default;
    //stroke: $action-default-fill-primary-default;
    //stroke-width: 0.8px;
    overflow: visible;
    pointer-events: none;

    // Windows, Firefox HCM Fix
    @media screen and (-ms-high-contrast: active),
      screen and (prefers-contrast) {
      // `ButtonText` is a CSS2 system color to help improve colors in HCM
      path {
        color: ButtonText;
      }
    }
  }

  .#{$prefix}--select-optgroup,
  .#{$prefix}--select-option {
    color: $text-body-default; // For the options to show in IE11
  }

  .#{$prefix}--select-option[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  // Override some Firefox user-agent styles
  @-moz-document url-prefix() {
    .#{$prefix}--select-option {
      background-color: $background-main;
      color: $text-body-default;
    }

    .#{$prefix}--select-optgroup {
      color: $text-body-default;
    }
  }

  .#{$prefix}--select--small {
    //TODO: work in progress
    .#{$prefix}--select-input {
      font-size: 0.8em;
      height: 30px;
      padding-right: 1.7rem;
    }
    .#{$prefix}--select__arrow {
      right: 0.6rem;
      bottom: 0.785rem;
    }
  }

  .#{$prefix}--select--inline {
    display: grid;
    grid-template-columns: auto auto;

    // Targets IE10+ browsers: Display grid auto not supported
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .#{$prefix}--label {
      white-space: nowrap;
      margin: 0 $spacing-03 0 0;
      font-weight: 400;
      align-self: center;
    }

    .#{$prefix}--select-input {
      background-color: transparent;
      color: $action-default-fill-primary-default;
      font-weight: 600;
      box-shadow: none;

      &:hover {
        background-color: $background-main;
      }

      &:focus {
        @include focus-outline("border");
      }

      ~ .#{$prefix}--select__arrow {
        bottom: auto;
        top: 1rem;
      }

      &[data-invalid] {
        color: $text-body-default;
        outline-offset: 2px;

        &:focus {
          outline: 1px solid $support-error-main;
          box-shadow: none;
        }
      }

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

      ~ .#{$prefix}--form-requirement {
        grid-column-start: 2;

        // Targets IE10+ browsers: Display grid auto not supported
        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
          position: absolute;
          bottom: -1.5rem;
        }
      }
    }
  }

  .#{$prefix}--select-input:disabled ~ .#{$prefix}--select__arrow {
    opacity: 0.5;
  }

  //Skeleton State
  .#{$prefix}--select.#{$prefix}--skeleton {
    @include skeleton;
    width: 100%;
    height: 2.5rem;
  }

  .#{$prefix}--select.#{$prefix}--skeleton .#{$prefix}--select-input {
    display: none;
  }
}