@layer components {
  /* Menu buttons - large action buttons for HogPoint main menu */
  .menubtn {
    --menubtn-hover-brightness: 0.92;

    align-items: center;
    background-color: var(--menubtn-background, var(--color-ink-lighter));
    border-radius: 0.75rem;
    box-shadow: var(--shadow);
    color: var(--menubtn-color, var(--color-ink));
    cursor: pointer;
    display: flex;
    font-size: var(--text-normal);
    font-weight: 600;
    gap: 0.75rem;
    inline-size: 100%;
    padding: 0.75rem 1rem;
    text-decoration: none;
    transition: 100ms ease-out;
    transition-property: background-color, box-shadow, filter, transform;

    @media (any-hover: hover) {
      &:hover {
        filter: brightness(var(--menubtn-hover-brightness));
      }
    }

    &:active {
      transform: scale(0.98);
    }

    &:focus-visible {
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }
  }

  /* Domain-specific color variants */
  .menubtn--servicing {
    --menubtn-background: var(--color-servicing);
  }

  .menubtn--farrowing {
    --menubtn-background: var(--color-farrowing);
  }

  .menubtn--weaning {
    --menubtn-background: var(--color-weaning);
  }

  .menubtn--treatment {
    --menubtn-background: var(--color-treatment);
  }

  .menubtn--slaughter {
    --menubtn-background: var(--color-slaughter-light);
  }

  /* Blue variants for settings/navigation menu items */
  .menubtn--blue {
    --menubtn-background: var(--color-blue-lightest);
  }

  .menubtn--blue-dark {
    --menubtn-background: var(--color-blue-light);
  }

  /* Menu button icon/emoji */
  .menubtn__icon {
    flex-shrink: 0;
    font-size: 1em;
    line-height: 1;
  }

  /* Menu button label */
  .menubtn__label {
    flex-grow: 1;
  }
}