{"mappings":"ACmBA,wCAOA,kKAgCA,+BAGE,yDAMA,6IASF,0FAME,iGAIE,2FAMJ,gJAWE,gDAIA,mGAKF,+CAIA,6EAME,+CAKF,iFAKA,uEAMA,kEAIE,0DAKA,qDAMF,kCAIA,2HAUA,wHAQA,wIAQE,mGAKA,uFAKA,qGAKE,gIAWJ,iHAQA,kFAOA,oDAIE,oDAGE,iDAIA","sources":["select-a11y.css","src/select-a11y.scss"],"sourcesContent":["button, input, label, select {\n  font-size: 1em;\n}\n\n.sr-only {\n  width: 1px;\n  height: 1px;\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: none;\n  margin: -1px;\n  padding: 0;\n  position: absolute;\n  overflow: hidden;\n}\n\n.select-a11y {\n  position: relative;\n}\n\n.select-a11y.is-open .select-a11y__overlay {\n  display: block;\n}\n\n.select-a11y input::-webkit-contacts-auto-fill-button {\n  visibility: hidden;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  display: none !important;\n}\n\n.select-a11y-button {\n  width: 100%;\n  text-align: left;\n  background-color: #dfdfe4;\n  position: relative;\n}\n\n.select-a11y-button[aria-expanded=\"true\"] {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.select-a11y-button[aria-expanded=\"true\"] .select-a11y-button__icon {\n  transform: rotate(180deg);\n}\n\n.select-a11y-button__clear {\n  appearance: none;\n  background: none;\n  border: none;\n  margin: 0;\n  padding: 0;\n  line-height: 0;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 2rem;\n}\n\n.select-a11y-button__clear:before {\n  content: \"✕\";\n}\n\n.select-a11y-button.select-a11y-button--no-selected-option + .select-a11y-button__clear {\n  display: none;\n}\n\n.select-a11y-button__text {\n  padding-right: 2.5rem;\n}\n\n.select-a11y-button__icon {\n  line-height: 0;\n  position: absolute;\n  top: 50%;\n  right: .5em;\n}\n\n.select-a11y-button__icon:before {\n  content: \"▼\";\n}\n\n.select-a11y__selected-item {\n  border: 1px solid #c3c4cc;\n  padding: .2em .1em .2em .5em;\n}\n\n.select-a11y-delete__icon:before {\n  content: \"✕\";\n  color: red;\n  line-height: 1;\n}\n\n.select-a11y-delete {\n  background-color: #0000;\n  border: 1px solid #0000;\n}\n\n.select-a11y-delete:focus {\n  color: red;\n  outline: 1px solid red;\n}\n\n.select-a11y-delete:hover {\n  color: red;\n  border-color: red;\n}\n\n.select-a11y__hidden {\n  display: none;\n}\n\n.select-a11y__overlay {\n  z-index: 10;\n  background: #ecedef;\n  border: 1px solid #dfdfe4;\n  padding: .5em;\n  position: absolute;\n  left: 0;\n  right: 0;\n}\n\n.select-a11y-suggestions {\n  max-height: 10em;\n  background-color: #fff;\n  border: 1px solid #595b6a;\n  margin-top: .5em;\n  overflow-y: auto;\n}\n\n.select-a11y-suggestion {\n  color: #595b6a;\n  cursor: pointer;\n  text-align: left;\n  align-items: center;\n  padding: .25rem .5rem .25rem 1.5rem;\n  display: flex;\n}\n\n.select-a11y-suggestion:focus, .select-a11y-suggestion:hover {\n  color: #363740;\n  background-color: #dfdfe4;\n}\n\n.select-a11y-suggestion:focus {\n  outline-offset: -1px;\n  outline: 1px dotted #363740 !important;\n}\n\n.select-a11y-suggestion[aria-selected=\"true\"] {\n  color: #363740;\n  background-color: #c3c4cc;\n  position: relative;\n}\n\n.select-a11y-suggestion[aria-selected=\"true\"]:before {\n  content: \"▸\";\n  position: absolute;\n  top: 50%;\n  left: .5em;\n  transform: translateY(-50%);\n}\n\n.select-a11y-suggestion__image {\n  width: 3rem;\n  height: 3rem;\n  object-fit: cover;\n  object-position: center;\n  margin-right: .5rem;\n}\n\n.select-a11y__no-suggestion {\n  color: #595b6a;\n  text-align: left;\n  margin: 0;\n  padding: 0 .5em;\n}\n\n.select-a11y__selected-list {\n  margin: 0;\n  padding: .5em 0;\n}\n\n.select-a11y__selected-list li {\n  margin: 0 .3em .3em 0;\n}\n\n.select-a11y__selected-list li:before {\n  content: \"\";\n}\n\n.select-a11y__selected-list li span {\n  display: inline-block;\n}\n\n/*# sourceMappingURL=select-a11y.css.map */\n","// select-a11y\n// ==========================================================\n/* if you use Scampi (https://gitlab.com/pidila/scampi),\nyou don't need this first part */\n@use \"sass:math\";\n\n$gray-base:                   #42434e; \n\n$gray-1:                      darken($gray-base, 5%) !default;\n$gray-2:                      $gray-base !default;\n$gray-3:                      lighten($gray-base, 10%) !default;\n$gray-4:                      lighten($gray-base, 20%) !default;\n$gray-5:                      lighten($gray-base, 30%) !default;\n$gray-6:                      lighten($gray-base, 40%) !default;\n$gray-7:                      lighten($gray-base, 50%) !default;\n$gray-8:                      lighten($gray-base, 55%) !default;\n$gray-9:                      lighten($gray-base, 60%) !default;\n$gray-10:                     lighten($gray-base, 65%) !default;\n\nbutton,\ninput,\nlabel,\nselect {\n  font-size: 1em;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  -webkit-clip-path: inset(50%);\n  clip-path: inset(50%);\n  border: 0;\n  white-space: nowrap;\n}\n\n/* select-a11y\n------------------------------------------------------ */\n$select-a11y-button-bg:          $gray-9 !default;\n$select-a11y-button-symbol:      \"\\25BC\" !default; // ▼\n\n$select-a11y__selected-item-border:             $gray-7 !default;\n$select-a11y-delete-symbol:        \"\\2715\" !default; // X\n$select-a11y-delete-symbol-color:  red !default;\n$select-a11y-delete-border:        red !default;\n\n$select-a11y-suggestions-bg:         $gray-10 !default;\n$select-a11y-suggestion-color:       $gray-3 !default;\n$select-a11y-suggestion-color-hover: $gray-1 !default;\n$select-a11y-suggestion-bg-hover:    $gray-9 !default;\n$select-a11y-suggestion-bg-selected: $gray-7 !default;\n$select-a11y-suggestion-border:      $gray-3 !default;\n\n\n.select-a11y {\n  position: relative;\n\n  &.is-open .select-a11y__overlay {\n    display: block;\n  }\n\n  // fix safari pour cacher l'autocompletion native\n  // cf http://stackoverflow.com/questions/38663578/how-to-hide-autofill-safari-icon-in-input-field\n  input::-webkit-contacts-auto-fill-button {\n    visibility: hidden;\n    display: none !important;\n    pointer-events: none;\n    position: absolute;\n    right: 0;\n  }\n}\n\n.select-a11y-button {\n  position: relative;\n  width: 100%;\n  text-align: left;\n  background-color: $select-a11y-button-bg;\n\n  &[aria-expanded=\"true\"] {\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n\n    .select-a11y-button__icon {\n      transform: rotate(180deg);\n    }\n  }\n}\n\n.select-a11y-button__clear {\n  position: absolute;\n  top: 0;\n  right: 2rem;\n  bottom: 0;\n  appearance: none;\n  padding: 0;\n  margin: 0;\n  line-height: 0;\n  border: none;\n  background: none;\n  &::before {\n    content: '✕';\n  }\n  \n  .select-a11y-button.select-a11y-button--no-selected-option + & {\n    display: none;\n  }\n}\n\n.select-a11y-button__text {\n  padding-right: 2.5rem;\n}\n\n.select-a11y-button__icon {\n  position: absolute;\n  top:50%;\n  right: 0.5em;\n  line-height: 0;\n\n  &::before {\n    content :$select-a11y-button-symbol;\n  }\n}\n\n.select-a11y__selected-item {\n  border: 1px solid $select-a11y__selected-item-border;\n  padding: .2em .1em .2em 0.5em;\n}\n\n.select-a11y-delete__icon:before {\n  content: $select-a11y-delete-symbol;\n  color: $select-a11y-delete-symbol-color;\n  line-height: 1;\n}\n\n.select-a11y-delete {\n  background-color: transparent;\n  border: 1px solid transparent;\n\n  &:focus{\n    outline: 1px solid $select-a11y-delete-border;\n    color: $select-a11y-delete-border;\n  }\n\n  &:hover {\n    color: $select-a11y-delete-border;\n    border-color: $select-a11y-delete-border;\n  }\n}\n\n.select-a11y__hidden {\n  display: none;\n}\n\n.select-a11y__overlay {\n  position: absolute;\n  left: 0;\n  right: 0;\n  padding: 0.5em;\n  background: $select-a11y-suggestions-bg;\n  z-index: 10;\n  border: 1px solid $select-a11y-button-bg;\n}\n\n.select-a11y-suggestions {\n  max-height: 10em;\n  overflow-y: auto;\n  border: 1px solid $select-a11y-suggestion-border;\n  margin-top: 0.5em;\n  background-color: #fff;\n}\n\n.select-a11y-suggestion {\n  padding: 0.25rem 0.5rem 0.25rem 1.5rem;\n  color: $select-a11y-suggestion-color;\n  cursor: pointer;\n  text-align: left;\n  display: flex;\n  align-items: center;\n\n  &:focus,\n  &:hover {\n    color: $select-a11y-suggestion-color-hover;\n    background-color: $select-a11y-suggestion-bg-hover;\n  }\n  &:focus {\n    outline: 1px dotted $select-a11y-suggestion-color-hover !important;\n    outline-offset: -1px;\n  }\n\n  &[aria-selected=\"true\"] {\n    background-color: $select-a11y-suggestion-bg-selected;\n    color: $select-a11y-suggestion-color-hover;\n    position: relative;\n\n    &:before {\n      content: '▸';\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: math.div(8em, 16);\n    }\n  }\n}\n\n\n.select-a11y-suggestion__image {\n  width: 3rem;\n  height: 3rem;\n  object-fit: cover;\n  object-position: center;\n  margin-right: 0.5rem;\n}\n\n.select-a11y__no-suggestion {\n  padding: 0 0.5em;\n  color: $select-a11y-suggestion-color;\n  text-align: left;\n  margin: 0;\n}\n\n.select-a11y__selected-list {\n  padding: 0.5em 0;\n  margin: 0;\n\n  li {\n    margin: 0 0.3em 0.3em 0;\n\n    &:before {\n      content:\"\";\n    }\n\n    span {\n      display: inline-block;\n    }\n  }\n}\n"],"names":[],"version":3,"file":"select-a11y.css.map"}