@use "@/mixins"

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

  appearance: none
  margin: 0
  min-width: 1em
  min-height: 1em
  flex: 0 0 auto
  display: flex
  place-items: center
  outline: none
  border: none
  background: none
  color: var(--color)
  font: inherit

  @include mixins.controllable

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

  > label
    padding: 0 0.25em
    min-width: 1.5em
    height: 1.5em
    display: flex
    place-items: center
    place-content: center
    pointer-events: all
    position: relative

    *
      pointer-events: none

  > input
    display: none

    &:checked + label, &[type="button"]:active + label
      color: var(--color-active)

  &.framed
    > input:not([type="radio"]) + label
      border-radius: 0.25em
      border: 0.5px solid var(--color)
      box-shadow: 0 0 3px -1px var(--color)

      > span
        padding: 0 0.5em

      &:after
        content: ""
        position: absolute
        width: 100%
        height: 100%
        border-radius: inherit
        background-color: var(--color)
        opacity: 0.04
        pointer-events: none

    &.landscape
      > label
        width: 1.625em

    > input:checked + label, > input[type="button"]:active + label
      color: var(--color-active)
      border-radius: 0.25em
      border: 0.5px solid var(--color-active)
      box-shadow: 0 0 3px -1px var(--color-active)

      &:after
        content: ""
        position: absolute
        width: 100%
        height: 100%
        border-radius: inherit
        background-color: var(--color-active)
        opacity: 0.08
        pointer-events: none