component
  --color-active: var(--color)

  appearance: none
  margin: 0
  padding: 0
  min-width: 1.5em
  flex: 0 0 auto
  display: flex
  place-items: center
  place-content: center
  outline: none
  border: none
  background: none
  color: var(--color)
  font: inherit
  pointer-events: all

  > *
    pointer-events: none

  .disabled &
    opacity: 0.3
    pointer-events: none

  &.stretch
    flex: 1 0 auto

  &.pointer
    cursor: pointer

  &.tiny-triangle:after
    content: "▾"
    font-size: 0.5em
    position: relative
    top: 0.75em
    left: 0.125em

  > label
    display: flex
    align-items: center
    justify-content: space-between
    font-size: 0.75em
    column-gap: 0.25em

  &.framed
    border-radius: 0.25em
    border: 0.5px solid var(--color)
    box-shadow: 0 0 3px -1px var(--color)
    min-height: 1.5em

    > label
      padding: 0 0.25em 0 0.5em

  &.active
    color: var(--color-active)

    &.framed
      border: 0.5px solid var(--color-active)
      box-shadow: 0 0 3px -1px var(--color-active)