:root {
  --visage-listbox-button-padding: 5px 44px 5px 16px;
  --visage-listbox-button-min-height: var(--visage-dropdown-height);
  --visage-listbox-button-min-height-mini: var(--visage-dropdown-height-mini);
  --visage-listbox-button-font-size: var(--visage-text-size-7);
  --visage-listbox-button-font-color: var(--visage-dropdown-font-color);
  --visage-listbox-background-color: var(--visage-color-background);
  --visage-listbox-button-border-width: var(--visage-dropdown-border-width, 1px);
  --visage-listbox-button-border-color: var(--visage-dropdown-border-color);
  --visage-listbox-button-border-radius: calc(var(--visage-listbox-button-min-height) / 2);
  --visage-listbox-popover-border: 1px solid #dfdfdf;
  --visage-listbox-option-background-selected: transparent;
  --visage-listbox-option-color-selected: #666666;
  --visage-listbox-flash-background: rgba(17, 89, 166, 1);
  --visage-listbox-flash-color: white;
  --visage-listbox-popover-max-height: 200px
}
.visage-listbox {
  display: inline-block
}
.visage-listbox-button,
.visage-listbox-button-with-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: auto;
  min-width: calc( 44px + 2ch);
  min-height: var(--visage-listbox-button-min-height);
  padding: var(--visage-listbox-button-padding);
  margin: 0;
  color: var(--visage-listbox-button-font-color);
  font-size: var(--visage-listbox-button-font-size);
  line-height: var(--visage-listbox-button-line-height, var(--visage-text-size-7-line-height));
  font-weight: normal;
  text-align: left;
  letter-spacing: normal;
  text-overflow: ellipsis;
  background-color: var(--visage-listbox-background-color);
  background-image: var(--visage-listbox-background-image, var(--visage-icon-url-dropdown));
  background-repeat: no-repeat;
  background-position: top 50% right 16px;
  border-width: var(--visage-listbox-button-border-width);
  border-style: solid;
  border-color: var(--visage-listbox-button-border-color);
  border-radius: var(--visage-listbox-button-border-radius);
  cursor: pointer;
  transition: all 0.2s
}
.visage-listbox-button-with-label:hover,
.visage-listbox-button:hover {
  color: var(--visage-listbox-button-font-color-hover, var(--visage-listbox-button-font-color));
  background-color: var(--visage-listbox-background-color-hover, var(--visage-listbox-background-color));
  background-image: var(--visage-icon-url-dropdown-hover, var(--visage-icon-url-dropdown));
  border-color: var(--visage-listbox-button-border-color-hover, var(--visage-listbox-button-border-color))
}
.visage-listbox-button-with-label:active,
.visage-listbox-button:active {
  color: var(--visage-listbox-button-font-color-active, var(--visage-listbox-button-font-color));
  background-color: var(--visage-listbox-background-color-active, var(--visage-listbox-background-color));
  border-color: var(--visage-listbox-button-border-color-active, var(--visage-listbox-button-border-color))
}
.visage-listbox-button-with-label:focus,
.visage-listbox-button:focus {
  border-color: var(--visage-listbox-border-color-focus, var(--visage-color-black));
  outline: var(--visage-listbox-outline-focus, 0 none)
}
.visage-listbox-button-with-label[aria-disabled="true"],
.visage-listbox-button[aria-disabled="true"] {
  color: var(--visage-color-font-disabled);
  background-color: var(--visage-color-background-disabled);
  background-image: var(--visage-icon-url-dropdown-disabled);
  border-color: var(--visage-color-border-disabled);
  cursor: auto
}
.visage-listbox-mini .visage-listbox-button,
.visage-listbox-mini .visage-listbox-button-with-label {
  position: relative;
  min-height: var(--visage-listbox-button-min-height-mini)
}
.visage-listbox-full-width {
  width: 100%
}
.visage-listbox-full-width .visage-listbox-button,
.visage-listbox-full-width .visage-listbox-button-with-label {
  width: 100%
}
.visage-listbox-arrow,
.visage-listbox-button [data-reach-listbox-arrow] {
  display: none
}
.visage-listbox-button-with-label-container,
.visage-listbox-button-with-label-value {
  display: flex;
  align-items: center;
  margin-left: 8px;
  font-weight: bold
}
.visage-listbox-popover {
  display: block;
  position: absolute;
  z-index: 2;
  min-width: min-content;
  padding: var(--visage-listbox-popover-padding, 12px 8px);
  font-size: var(--visage-listbox-popover-font-size, var(--visage-listbox-button-font-size));
  background: var(--visage-listbox-popover-background, #fff);
  border: var(--visage-listbox-popover-border);
  border-radius: var(--visage-listbox-popover-border-radius, 8px);
  outline: none;
  max-height: var(--visage-listbox-popover-max-height);
  overflow: auto
}
.visage-listbox-popover:focus-within {
  box-shadow: var(--visage-listbox-popover-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.1))
}
.visage-listbox-popover[hidden] {
  display: none
}
.visage-listbox-list {
  margin: 0;
  padding: 0;
  list-style: none
}
.visage-listbox-list:focus {
  box-shadow: none;
  outline: none
}
.visage-listbox-option {
  display: block;
  padding: var(--visage-listbox-option-padding, 8px 0);
  margin: var(--visage-listbox-option-margin, 0);
  color: var(--visage-listbox-option-font-color, var(--visage-listbox-button-font-color));
  font-size: var(--visage-listbox-option-font-size, var(--visage-listbox-button-font-size));
  font-weight: var(--visage-listbox-option-font-weight, bold);
  white-space: nowrap;
  user-select: none
}
.visage-listbox-option:hover {
  color: var(--visage-listbox-option-font-color-hover, #666)
}
.visage-listbox-option:focus {
  outline: 1px solid #000
}
.visage-listbox-option[aria-selected="true"] {
  background: var(--visage-listbox-option-background-selected);
  color: var(--visage-listbox-option-color-selected)
}
.visage-listbox-option[data-current] {
  font-weight: bold
}
.visage-listbox-option[data-current][data-confirming] {
  animation: visage-listbox-flash 100ms;
  animation-iteration-count: 1
}
.visage-listbox-option[aria-disabled="true"] {
  color: #dfdfdf
}
.visage-listbox-group-label {
  display: block;
  margin: 0;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  user-select: none;
  font-weight: bolder
}
@keyframes visage-listbox-flash {
  0% {
    background: var(--visage-listbox-flash-background);
    color: var(--visage-listbox-flash-color);
    opacity: 1
  }
  50% {
    opacity: 0.5;
    background: inherit;
    color: inherit
  }
  100% {
    background: var(--visage-listbox-flash-background);
    color: var(--visage-listbox-flash-color);
    opacity: 1
  }
}