/*
 * The unit switch of a size guide and of the Product Dimensions block (src/Blocks/UnitSwitch.php): two buttons in a
 * bordered group, the chosen one filled, in the control role (docs/design-tokens.html#roles).
 */
:is(.lanternwp-dimensions__units, .lanternwp-option-guide__units) {
  display: flex;
  padding: calc(var(--wp--preset--spacing--10) / 2);
  border: 1px solid var(--wp--preset--color--border-strong);
  border-radius: var(--wp--custom--radius--control);

  & button {
    min-inline-size: 2.5rem;
    min-block-size: 2rem;
    padding: 0 var(--wp--preset--spacing--20);
    border: 0;
    border-radius: var(--wp--custom--radius--control);
    background: transparent;
    color: var(--wp--preset--color--contrast);
    font: inherit;
    font-size: var(--wp--preset--font-size--xs);
    font-weight: var(--wp--custom--weight--semibold);
    cursor: pointer;
    box-shadow: inset 0 0 0 100vmax color-mix(in srgb, currentcolor var(--lanternwp-tint, 0%), transparent);
    transition:
      --lanternwp-tint var(--wp--custom--motion--fast) var(--wp--custom--motion--easing),
      scale var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);

    /* The control role (docs/design-tokens.html#roles): the `interaction.tint` layer on hover, the press scale. */
    &:active {
      scale: var(--wp--custom--interaction--press);
    }
  }

  & button[aria-pressed='true'] {
    background: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
  }

  @media (hover: hover) {
    & button:hover {
      --lanternwp-tint: var(--wp--custom--interaction--tint);
    }
  }
}