/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
/* Do not use this */
/* Use this */
go-select {
  --dd-item-padding-y: 0.5rem;
  --dd-item-padding-x: 1rem;
  /**
    @prop --dd-item-padding:
      Padding for dropdown item
      - default: 0.5rem 1rem
  */
  --dd-item-padding: var(--dd-item-padding-y) var(--dd-item-padding-x);
  /**
    @prop --dd-item-radius:
      Border radius for dropdown item
      - default: var(--radius-1)
  */
  --dd-item-radius: var(--radius-1);
  /**
    @prop --dd-item-bg:
      Background of dropdown item
      - default: var(--dropdown-bg-color)
  */
  --dd-item-bg: var(--dropdown-bg-color);
  /**
    @prop --dd-item-bg-hover:
      Hover background for dropdown item
      - default: var(--go-color-neutral-200)
  */
  --dd-item-bg-hover: var(--go-color-neutral-200);
  /**
    @prop --dd-item-bg-selected:
      background for selected state
      - default: var(--go-color-neutral-200)
  */
  --dd-item-bg-selected: var(--go-color-neutral-200);
  /**
    @prop --dd-item-fg:
      Foreground of dropdown item
      - default: var(--go-color-neutral-900)
  */
  --dd-item-fg: var(--go-color-neutral-900);
  /**
    @prop --dd-item-fg-hover:
      Hover foreground of dropdown item
      - default: var(--go-color-darkest)
  */
  --dd-item-fg-hover: var(--go-color-darkest);
  /**
    @prop --dd-item-fg-selected:
      Selected state foreground
      - default: var(--go-color-darkest)
  */
  --dd-item-fg-selected: var(--go-color-darkest);
  /**
    @prop --dd-item-bg-disabled:
      Disabled background color
      - default: transparent
  */
  --dd-item-bg-disabled: transparent;
  /**
    @prop --dd-item-fg-disabled:
      Disabled foreground color
      - default: var(--go-color-neutral-600)
  */
  --dd-item-fg-disabled: var(--go-color-neutral-600);
  /**
    @prop --dd-item-width:
      Width of dropdown item
      - default: 100%
  */
  --dd-item-width: 100%;
  /**
    @prop --dd-item-line-height:
      line height of item
      - default: 1.5em
  */
  --dd-item-line-height: 1.5em;
  --dropdown-width: 100%;
}
go-select .combo {
  width: 100%;
  position: relative;
}
go-select .control-icon {
  z-index: 1;
}
go-select .control {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
go-select .control .arrow {
  height: 1.5em;
  transition: transform var(--go-duration-normal) var(--go-timing-function);
}
@media (prefers-reduced-motion: reduce) {
  go-select .control .arrow {
    transition-duration: 0s;
  }
}
go-select .control .arrow.open {
  transform: rotate(180deg);
}
go-select go-dropdown {
  max-height: 20rem;
  overflow: auto;
  z-index: 9;
}
go-select .combo-option {
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  display: block;
  padding: var(--dd-item-padding);
  border-radius: var(--dd-item-radius);
  background: var(--dd-item-bg);
  color: var(--dd-item-fg);
  width: var(--dd-item-width);
  line-height: var(--dd-item-line-height);
  min-height: calc(2 * var(--dd-item-padding-y) + var(--dd-item-line-height));
  text-align: start;
}
go-select .combo-option:hover {
  background: var(--dd-item-bg-hover);
  color: var(--dd-item-fg-hover);
}
go-select .combo-option:focus-visible {
  position: relative;
  z-index: 1;
  outline: var(--go-focus-outline-width, 2px) solid var(--go-focus-outline-color, #000);
}
go-select .combo-option[aria-selected] {
  background: var(--dd-item-bg-selected);
  color: var(--dd-item-fg-selected);
  padding-right: 2rem;
  position: relative;
}
go-select .combo-option[aria-selected]::after {
  border-bottom: 0.125rem solid currentColor;
  border-right: 0.125rem solid currentColor;
  content: "";
  height: 1rem;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translate(0, -50%) rotate(45deg);
  width: 0.5rem;
}
go-select[disabled] .combo-option {
  background: var(--dd-item-bg-disabled);
  color: var(--dd-item-fg-disabled);
}