@layer components {
  .pillow {
    background: var(--gradient-pillow);
    box-shadow: var(--shadow-pillow);
  }

  .pillow--pressable {
    cursor: pointer;
    touch-action: manipulation;
    transition: translate 150ms var(--ease-out), scale 150ms var(--ease-out);

    @media (hover: hover) {
      &:hover:not(:disabled, [aria-pressed="true"]) {
        translate: 0 var(--pillow-lift, -1px);
      }
    }

    &:active:not(:disabled) {
      scale: var(--pillow-press, 0.97);
    }

    &:focus-visible,
    &:has(:focus-visible) {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }
}