.toggle {
  align-items: center;
  color: var(--toggle-color, currentColor);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--toggle-font-size, 1.8rem);
  font-weight: var(--toggle-font-weight, var(--font-weight-semibold));
  gap: 0.5em;
  inline-size: var(--toggle-width, auto);
  text-align: start;
  user-select: none;
}

.toggle:is([aria-pressed='true']) {
  --toggle-pressed: 1;
  --toggle-background-color: var(--toggle-foreground-color--pressed, var(--color-orange));
  --toggle-foreground-color: var(--toggle-foreground-color--pressed, var(--color-white));
  --toggle-border-color: var(--toggle-border-color--pressed, var(--color-orange));
  --toggle-inner-border-color: var(--toggle-inner-border-color--pressed, transparent);
  --toggle-opacity: var(--toggle-opacity--pressed, 1);
}

.toggle__indicator {
  --_toggle-size: var(--toggle-size, 2.8rem);
  --_toggle-inner-padding: var(--toggle-inner-padding, 0.5rem);
  --_toggle-bullet-size: calc(var(--_toggle-size) - var(--_toggle-inner-padding) * 2);

  background-color: var(--toggle-background-color, var(--color-orange-light));
  block-size: var(--_toggle-size);
  border-color: var(--toggle-border-color, var(--color-orange));
  border-radius: calc(var(--_toggle-size) / 2);
  border-style: var(--toggle-border-style, solid);
  border-width: var(--toggle-border-width, 1px);
  cursor: pointer;
  display: block;
  flex-shrink: 0;
  inline-size: calc(var(--_toggle-bullet-size) * 2 + var(--_toggle-inner-padding) * 2);
  margin-inline-end: 0.5em;
  opacity: var(--toggle-opacity, 0.5);
  position: relative;
  transition-property: background-color;

  &::before {
    background-color: var(--toggle-foreground-color, var(--color-white));
    block-size: var(--_toggle-bullet-size);
    border-color: var(--toggle-inner-border-color, var(--color-orange));
    border-radius: 50%;
    border-style: var(--toggle-inner-border-style, solid);
    border-width: var(--toggle-inner-border-width, 1px);
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
    content: '';
    inline-size: var(--_toggle-bullet-size);
    inset-block-start: calc(var(--_toggle-inner-padding) - var(--toggle-border-width, 1px));
    inset-inline-start: var(--_toggle-inner-padding);
    position: absolute;
    transition-property: background-color, translate;
    translate: calc(var(--toggle-pressed, 0) * 100%) 0;
  }
}

.toggle__text {
  line-height: var(--line-height-default);
}