:host {
  /*
* @prop --button-background: sets CSS `background` property on the `<button>` that triggers the dropdown.
* @prop --button-border: sets CSS `border` property on the `<button>`.
* @prop --button-focus-box-shadow: sets CSS `box-shadow` for button's focus visual state.
* @prop --button-font-size: sets CSS `font-size` property on the `<button>`.
* @prop --button-max-height: sets CSS `max-height` property on the `<button>`.
* @prop --button-min-height: sets CSS `min-height` property on the `<button>`.
* @prop --button-padding: sets CSS `padding` property on the `<button>`.
* @prop --listbox-max-height: sets CSS `max-height` property on the `<ul>` dropdown.
* @prop --listbox-max-width: sets CSS `max-width` property on the `<ul>` dropdown and `<button>`.
* @prop --list-expanded-box-shadow: sets CSS `box-shadow` property on the `<ul>` dropdown.
* @prop --list-expanded-background: sets CSS `background` on the dropdown.
* @prop --svg-top: sets CSS `top` property on the `<svg>`.
*/
  --button-background: #fff;
  --button-border: none;
  --button-focus-box-shadow: inset 0 0 0 2px #1b2c56;
  --button-font-size: 0.875em;
  --button-max-height: 3em;
  --button-min-height: 3em;
  --button-padding: 1em 3em 1em 1em;
  --listbox-max-height: 80vmin;
  --listbox-max-width: 16.875rem;
  --list-expanded-box-shadow: inset 0 0 0 2px #1b2c56;
  --list-expanded-background: #ffffff;
  --svg-top: 1.25em;

  display: inline-flex;
  position: relative;

  width: 100%;

  max-width: 16.875rem;
  max-width: var(--listbox-max-width);
}

button {
  flex: 1 1 100%;

  height: 100%;

  min-height: 3em;
  min-height: var(--button-min-height);

  max-height: 3em;
  max-height: var(--button-max-height);

  padding: 1em 3em 1em 1em;
  padding: var(--button-padding);

  transition: box-shadow 0.2s ease-out;

  border: none;
  border: var(--button-border);

  background: #fff;
  background: var(--button-background);

  color: inherit;

  font-family: inherit;

  font-size: 0.875em;
  font-size: var(--button-font-size);

  line-height: 1;

  text-align: left;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;
}

button:focus,
button:hover {
  outline: none;

  box-shadow: 0 0 0 2px #1b2c56;
  box-shadow: var(--button-focus-box-shadow);
}

button > svg {
  position: absolute;

  top: 1.25em;
  top: var(--svg-top);
  right: 1em;

  width: 0.875em;

  margin-left: 1rem;

  transition: transform 0.1s ease-out;
}

button[aria-expanded] > svg {
  transform: rotate(180deg);
}

button + ul {
  position: absolute;
  right: 0;
  left: 0;

  max-height: 0;

  margin: 0;

  padding: 0.5em 0;

  transition: opacity 0.1s ease-out;

  background: #ffffff;
  background: var(--list-expanded-background);

  list-style: none;

  opacity: 0;
  overflow: hidden;
  visibility: hidden;
}

button[aria-expanded] + ul {
  max-height: 80vmin;
  max-height: var(--listbox-max-height);

  transform: translateY(var(--listbox-offset));

  box-shadow: inset 0 0 0 2px #1b2c56;
  box-shadow: var(--list-expanded-box-shadow);

  opacity: 1;
  overflow: auto;
  visibility: visible;

  z-index: 10;
}

:host .visually-hidden:not(:focus):not(:active) {
  position: absolute;

  width: 1px;
  height: 1px;

  white-space: nowrap;

  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}