// select-a11y
// ==========================================================
/* if you use Scampi (https://gitlab.com/pidila/scampi),
you don't need this first part */
@use "sass:math";

$gray-base:                   #42434e; 

$gray-1:                      darken($gray-base, 5%) !default;
$gray-2:                      $gray-base !default;
$gray-3:                      lighten($gray-base, 10%) !default;
$gray-4:                      lighten($gray-base, 20%) !default;
$gray-5:                      lighten($gray-base, 30%) !default;
$gray-6:                      lighten($gray-base, 40%) !default;
$gray-7:                      lighten($gray-base, 50%) !default;
$gray-8:                      lighten($gray-base, 55%) !default;
$gray-9:                      lighten($gray-base, 60%) !default;
$gray-10:                     lighten($gray-base, 65%) !default;

button,
input,
label,
select {
  font-size: 1em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* select-a11y
------------------------------------------------------ */
$select-a11y-button-bg:          $gray-9 !default;
$select-a11y-button-symbol:      "\25BC" !default; // ▼

$select-a11y__selected-item-border:             $gray-7 !default;
$select-a11y-delete-symbol:        "\2715" !default; // X
$select-a11y-delete-symbol-color:  red !default;
$select-a11y-delete-border:        red !default;

$select-a11y-suggestions-bg:         $gray-10 !default;
$select-a11y-suggestion-color:       $gray-3 !default;
$select-a11y-suggestion-color-hover: $gray-1 !default;
$select-a11y-suggestion-bg-hover:    $gray-9 !default;
$select-a11y-suggestion-bg-selected: $gray-7 !default;
$select-a11y-suggestion-border:      $gray-3 !default;


.select-a11y {
  position: relative;

  &.is-open .select-a11y__overlay {
    display: block;
  }

  // fix safari pour cacher l'autocompletion native
  // cf http://stackoverflow.com/questions/38663578/how-to-hide-autofill-safari-icon-in-input-field
  input::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    position: absolute;
    right: 0;
  }
}

.select-a11y-button {
  position: relative;
  width: 100%;
  text-align: left;
  background-color: $select-a11y-button-bg;

  &[aria-expanded="true"] {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

    .select-a11y-button__icon {
      transform: rotate(180deg);
    }
  }
}

.select-a11y-button__clear {
  position: absolute;
  top: 0;
  right: 2rem;
  bottom: 0;
  appearance: none;
  padding: 0;
  margin: 0;
  line-height: 0;
  border: none;
  background: none;
  &::before {
    content: '✕';
  }
  
  .select-a11y-button.select-a11y-button--no-selected-option + & {
    display: none;
  }
}

.select-a11y-button__text {
  padding-right: 2.5rem;
}

.select-a11y-button__icon {
  position: absolute;
  top:50%;
  right: 0.5em;
  line-height: 0;

  &::before {
    content :$select-a11y-button-symbol;
  }
}

.select-a11y__selected-item {
  border: 1px solid $select-a11y__selected-item-border;
  padding: .2em .1em .2em 0.5em;
}

.select-a11y-delete__icon:before {
  content: $select-a11y-delete-symbol;
  color: $select-a11y-delete-symbol-color;
  line-height: 1;
}

.select-a11y-delete {
  background-color: transparent;
  border: 1px solid transparent;

  &:focus{
    outline: 1px solid $select-a11y-delete-border;
    color: $select-a11y-delete-border;
  }

  &:hover {
    color: $select-a11y-delete-border;
    border-color: $select-a11y-delete-border;
  }
}

.select-a11y__hidden {
  display: none;
}

.select-a11y__overlay {
  position: absolute;
  left: 0;
  right: 0;
  padding: 0.5em;
  background: $select-a11y-suggestions-bg;
  z-index: 10;
  border: 1px solid $select-a11y-button-bg;
}

.select-a11y-suggestions {
  max-height: 10em;
  overflow-y: auto;
  border: 1px solid $select-a11y-suggestion-border;
  margin-top: 0.5em;
  background-color: #fff;
}

.select-a11y-suggestion {
  padding: 0.25rem 0.5rem 0.25rem 1.5rem;
  color: $select-a11y-suggestion-color;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;

  &:focus,
  &:hover {
    color: $select-a11y-suggestion-color-hover;
    background-color: $select-a11y-suggestion-bg-hover;
  }
  &:focus {
    outline: 1px dotted $select-a11y-suggestion-color-hover !important;
    outline-offset: -1px;
  }

  &[aria-selected="true"] {
    background-color: $select-a11y-suggestion-bg-selected;
    color: $select-a11y-suggestion-color-hover;
    position: relative;

    &:before {
      content: '▸';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: math.div(8em, 16);
    }
  }
}


.select-a11y-suggestion__image {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  object-position: center;
  margin-right: 0.5rem;
}

.select-a11y__no-suggestion {
  padding: 0 0.5em;
  color: $select-a11y-suggestion-color;
  text-align: left;
  margin: 0;
}

.select-a11y__selected-list {
  padding: 0.5em 0;
  margin: 0;

  li {
    margin: 0 0.3em 0.3em 0;

    &:before {
      content:"";
    }

    span {
      display: inline-block;
    }
  }
}