@use '../base' as *;

/* --------------------------------

File#: _1_custom-select
Title: Custom Select
Descr: Custom Select Control
Usage: codyhouse.co/license

-------------------------------- */

:root {
  // --default variation only 👇
  --select-icon-size: 16px;
  --select-icon-right-margin: var(--space-sm); // icon margin right
  --select-text-icon-gap: var(--space-xxxs); // gap between text and icon
}

.select {
  position: relative;
}

.select__input {
  width: 100%;
  height: 100%;
  padding-right: calc(var(--select-icon-size) + var(--select-icon-right-margin) + var(--select-text-icon-gap)) !important;
}

.select__icon {
  width: var(--select-icon-size);
  height: var(--select-icon-size);
  pointer-events: none;
  position: absolute;
  right: var(--select-icon-right-margin);
  top: 50%;
  transform: translateY(-50%);
}

// --custom-dropdown
:root {
  --select-dropdown-gap: 4px; // distance between select control and custom dropdown
}

.select__button { // created in JS - custom select control
  width: 100%;
}

.select__button[aria-expanded="true"] {
  // custom select control if dropdown = visible
}

.select__dropdown { // created in JS - custom select dropdown
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 200px;
  max-height: 1px; // updated in JS
  background-color: var(--color-bg-light);
  box-shadow: var(--inner-glow), var(--shadow-md);
  padding: var(--space-xxxs) 0;
  border-radius: var(--radius-md);
  z-index: var(--z-index-popover, 5);
  margin-top: var(--select-dropdown-gap);
  margin-bottom: var(--select-dropdown-gap);
  overflow: auto;

  // use rem units
  @include spaceUnit(1rem);
  @include textUnit(1rem);

  visibility: hidden;
  opacity: 0;
}

.select__dropdown--right { // change dropdown position based on the available space
  right: 0;
  left: auto;
}

.select__dropdown--up {
  bottom: 100%;
  top: auto;
}

.select__button[aria-expanded="true"] + .select__dropdown {
  visibility: visible;
  opacity: 1;
}

// custom <optgroup> list - include all <option>s if no <optgroup> available
.select__list {
  list-style: none !important;
}

.select__list:not(:first-of-type) {
  padding-top: var(--space-xxs);
}

.select__list:not(:last-of-type) {
  border-bottom: 1px solid alpha(var(--color-contrast-higher), 0.1);
  padding-bottom: var(--space-xxs);
}

.select__item { // single item inside .select__list
  display: flex;
  align-items: center;
  padding: var(--space-xxs) var(--space-sm);
  color: var(--color-contrast-high);
  width: 100%;
  text-align: left;
  // truncate text
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select__item--optgroup { // custom <optgroup> label
  font-size: var(--text-sm);
  color: var(--color-contrast-medium);
}

.select__item--option { // custom <option> label
  cursor: pointer;

  &:hover {
    background-color: alpha(var(--color-contrast-higher), 0.075);
  }

  &:focus {
    outline: none;
    background-color: alpha(var(--color-primary), 0.15);
  }

  &[aria-selected=true] { // selected option
    background-color: var(--color-primary);
    color: var(--color-white);
    position: relative;
    @include fontSmooth;

    &::after { // check icon next to the selected language
      content: '';
      display: block;
      height: 1em;
      width: 1em;
      margin-left: auto;
      background-color: currentColor;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline stroke-width='2' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round' points='1,9 5,13 15,3 '/%3E%3C/svg%3E");
    }

    &:focus {
      box-shadow: inset 0 0 0 2px var(--color-primary-dark);
    }
  }
}

html:not(.js ) .select .icon { // hide icon if JS = disabled
  display: none;
}