.c-select-a11y {
  position: relative;
  min-width: 10em;
}

.c-select-a11y * {
  color: var(--input-color-text, #333);
}

.c-select-a11y__button {
  align-items: baseline;
  background-color: var(--input-color-background, #fff);
  border-width: var(--input-size-border, .0625em);
  border-style: var(--input-style-border, solid);
  border-color: var(--input-color-border, #333);
  border-radius: var(--input-radius, .125em);
  color: var(--input-color-text, #333);
  display: flex;
  padding: var(--input-space-inset-y, .5em) 0 var(--input-space-inset-y, .5em) var(--input-space-inset-x, 1em);
  text-transform: inherit;
  font-family: var(--input-font-family, sans-serif);
  font-weight: var(--input-font-weight, inherit);
  line-height: var(--input-leading, 1.2);
  text-align: left;
  width: 100%;
}

.c-select-a11y__button:hover {
  background-color: var(--input-color-background-hover, #fff);
  cursor: pointer;
}

.c-select-a11y__button:focus {
  background-color: var(--input-color-background-hover, #fff);
}

.c-select-a11y__button .c-select-a11y__value {
  margin-right: var(--input-space-inset-x, 1em);
}

.c-select-a11y__button .c-select-a11y__icon--select {
  content: "";
  display: inline-block;
  background-image: var(--icon-down, url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'%3E%3Cpath d='M17.8 9.225c.3.3.3.9 0 1.2l-5.2 5.2c-.2.1-.4.2-.6.2-.2 0-.4-.1-.6-.2l-5.2-5.2c-.1-.2-.2-.4-.2-.6 0-.2.1-.4.2-.6.3-.3.9-.3 1.2 0l4.6 4.6 4.6-4.6c.3-.3.8-.3 1.2 0z'/%3E%3C/svg%3E"));
  background-repeat: no-repeat;
  background-position: 50%;
  height: var(--icon-size-y, 1em);
  width: var(--icon-size-x, 1em);
  margin-left: auto;
}

.c-select-a11y__button[aria-expanded="true"] .c-select-a11y__icon--select {
  background-image: var(--icon-up, url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'%3E%3Cpath d='M17.8 14.6c.3-.3.3-.9 0-1.2l-5.2-5.2c-.2-.1-.4-.2-.6-.2-.2 0-.4.1-.6.2l-5.2 5.2c-.1.2-.2.4-.2.6 0 .2.1.4.2.6.3.3.9.3 1.2 0L12 10l4.6 4.6c.3.3.8.3 1.2 0z'/%3E%3C/svg%3E"));
}

.c-select-a11y__button > span {
  font-family: inherit;
}

.c-select-a11y__container {
  position: absolute;
  background-color: var(--input-color-background, #fff);
  z-index: 10;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  padding: var(--input-space-inset-y, .5em) calc(var(--input-space-inset-x, 1em) / 2);
  width: 100%;
  width: -moz-max-content;
  width: max-content;
}

.c-select-a11y__search {
  background-image: var(--icon-search, url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'%3E%3Cpath d='M20 18.8c0 .3-.1.6-.4.9-.2.2-.5.4-.9.4-.3 0-.6-.1-.9-.4l-3.3-3.3c-1.1.8-2.4 1.2-3.8 1.2-.9 0-1.8-.2-2.6-.5-.8-.4-1.6-.8-2.2-1.4-.6-.6-1.1-1.3-1.4-2.2-.3-.9-.5-1.8-.5-2.7 0-.9.2-1.8.5-2.7.4-.8.9-1.5 1.5-2.1.6-.6 1.3-1.1 2.2-1.4.8-.4 1.7-.6 2.6-.6.9 0 1.8.2 2.6.5.8.4 1.6.9 2.2 1.5.6.6 1.1 1.3 1.4 2.2.4.8.5 1.7.5 2.6 0 1.4-.4 2.7-1.2 3.8l3.3 3.3c.3.2.4.5.4.9zm-6.2-5c.8-.8 1.3-1.9 1.3-3 0-1.2-.4-2.2-1.3-3-.8-.9-1.8-1.3-3-1.3s-2.2.4-3 1.3c-.8.8-1.3 1.9-1.3 3 0 1.2.4 2.2 1.3 3 .9.8 1.9 1.3 3 1.3 1.2 0 2.2-.4 3-1.3z'/%3E%3C/svg%3E"));
  background-repeat: no-repeat;
  background-position: right calc(var(--input-space-x, 1em) / 2) center;
  background-size: var(--icon-size-y, 1em) var(--icon-size-x, 1em);
  border-radius: var(--input-radius, .125em);
  box-sizing: border-box;
  display: block;
  padding: var(--input-space-inset-y, .5em) calc((var(--input-space-inset-x, 1em) / 2) + var(--input-space-x, 1em)) var(--input-space-inset-y, .5em) calc(var(--input-space-inset-x, 1em) / 2);
  margin-bottom: var(--input-space-y, .5em);
  text-overflow:ellipsis;
  width: 100%;
}

.c-select-a11y__search::-moz-placeholder {
  text-overflow: ellipsis;
}

.c-select-a11y__search:-ms-input-placeholder {
  text-overflow: ellipsis;
}

.c-select-a11y__search::placeholder {
  text-overflow: ellipsis;
}

.c-select-a11y__suggestions {
  max-height: 15em;
  overflow-y: auto;
}

.c-select-a11y__group {
  display: block;
  margin: 0;
  padding: 0;
}

* + .c-select-a11y__group {
  border-color: var(--input-border-color, #ccc);
  border-top-style: solid;
  border-top-width: 1px;
}

.c-select-a11y__group-label {
  display: block;
  font-weight: var(--label-font-weight, 700);
  margin: 0;
  padding: calc(var(--input-space-inset-y, .5em) / 2) calc(var(--input-space-inset-x, 1em) / 2);
}

.c-select-a11y__suggestion {
  background-color: var(--option-color-background, #fff);;
  cursor: pointer;
  display: block;
  margin: 0;
  padding: calc(var(--input-space-inset-y, .5em) / 2) calc(var(--input-space-inset-x, 1em) / 2) calc(var(--input-space-inset-y, .5em) / 2) calc((var(--input-space-inset-x, 1em) / 2) + var(--icon-size-x, 1em));
  position: relative;
}

.c-select-a11y__suggestion:hover,
.c-select-a11y__suggestion:focus {
  background-color: var(--option-color-background-hover, #eee);
  color: var(--option-color-text-hover, #000);
}

.c-select-a11y__suggestion:before {
  content: ' ';
  width: var(--icon-size-x, 1em);
  display: inline-block;
  font-weight: var(--font-weight-bold, 700);
  margin-left: calc(var(--icon-size-x, 1em) * -1);
  position: absolute;
}

.c-select-a11y__suggestion[aria-selected="true"]:before {
  content: '\2713';
}

.c-select-a11y__chips-wrapper {
  --input-space-y: .75rem;
  --input-space-x: .75rem;
  margin-top: var(--input-space-y);
}

.c-select-a11y__chips {
  --input-inset-y: .25em;
  --input-inset-x: .5em;
  display: flex;
  padding: 0;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin: calc(var(--input-space-y, .75em) / -2) calc(var(--input-space-x, .75em) / -2);
}

.c-select-a11y__chip {
  display: flex;
  align-items: center;
  margin: calc(var(--input-space-y, .75em) / 2) calc(var(--input-space-x, .75em) / 2);
  font-size: var(--chip-font-size, .875rem);
  border-color: var(--input-border-color, #ccc);
  border-width: var(--input-border-size, 1px);
  border-style: var(--input-border-style, solid);
  padding: var(--input-inset-y, .25em) var(--input-inset-x, .5em);
}

.c-select-a11y__chip-button {
  background-image: var(--icon-close, url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='000' %3E%3Cpath d='M6.313 16.92L16.919 6.312l1.768 1.768L8.081 18.687z'/%3E%3Cpath d='M16.92 18.687L6.312 8.081 8.08 6.313 18.687 16.92z'/%3E%3C/svg%3E%0A"));
  background-repeat: no-repeat;
  margin: calc(var(--input-inset-y, .25em) * -1) calc(var(--input-inset-x, .5em) * -1) calc(var(--input-inset-y, .25em) * -1) 0;
  background-position: 50%;
  min-height: 2em;
  width: 1em;
  background-size: 75%;
  background-color: transparent;
}