@use "../../../00-base/01-helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Forms: select (dropdown)
// *
////////////////////////////////////////////////////////////////////////////////


// * Default select using a wrapper
// =============================================================================

// -- Style select arrow using a wrapper
// -- http://lea.verou.me/2011/03/custom-select-drop-downs-with-css3/

select {
  appearance: none;
  display: block;
  height: rem(44);
  width: 100%;
  padding: 0 rem(40) 0 rem(10);
  border: rem(1) solid hsl(var(--clr-form-border));
  border-radius: rem(6);
  line-height: rem(42); // height - borders
  color: hsl(var(--clr-form));
  background-color: hsl(var(--clr-white));
  background-image: linear-gradient(45deg, transparent 50%, hsl(var(--clr-form)) 50%), linear-gradient(135deg, hsl(var(--clr-form)) 50%, transparent 50%);
  background-position: calc(100% - #{rem(20)}) #{rem(18)}, calc(100% - #{rem(15)}) #{rem(18)}, calc(100% - 2.5em) rem(8);
  background-size: rem(5) rem(5), rem(5) rem(5),rem(5) 1.5em;
  background-repeat: no-repeat;

  &:focus,
  &:focus:hover {
    border-color: hsl(var(--clr-form-active-border));
    color: hsl(var(--clr-form-active));
  }

  &:disabled,
  &[disabled] {
    border-color: hsl(var(--clr-form-disabled-border));
    border-style: dashed;
    color: hsl(var(--clr-form-disabled));
    background: hsl(var(--clr-form-disabled-bg));
    opacity: .5;
  }
}

.form__dropdown {
  position: relative;

  select {
    background-image: none;
  }
}

.form__dropdown__arrow {
  @include icon((
    icon: chevron-down,
    color: hsl(var(--clr-form-border)),
    size: 14,
    element: "after",
  ));

  &::after {
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}

// * Styling using Select2 plugin (for multiselects and normal dropdowns)
// =============================================================================

/* stylelint-disable */

// -- disable stylelint because need more nesting to override the default styling
form {
  .select2-container--default {
    .select2-selection--multiple {
      min-height: 0;
      // take styling from our input fields
      padding: rem(23) rem(20) rem(6) rem(20);
      border: rem(1) solid hsl(var(--clr-form-border));
      border-radius: 0;
      // Reset, we will set it on the li's.
      line-height: 0;

      .select2-selection__rendered {
        // compensate for the li's margins
        margin-left: rem(-5);

        li {
          margin-bottom: 0;

          &.select2-selection__choice {
            line-height: 1.5; // height of the content, changing this influences the height of the field
          }
        }
      }

      // reset the default input styles because not visible
      // they will go on the 'multiple' wrapper
      input[type="search"] {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 none !important;
      }
    }

    &.select2-container--focus {
      .select2-selection--multiple {
        border-color: hsl(var(--clr-form-active-border));
      }
    }

    &.select2-container--disabled {
      .select2-selection--multiple {
        border-color: hsl(var(--clr-form-disabled-border));
      }
    }
  }
}

/* stylelint-enable */
