/*
A26 Web Design System — Pull-down Buttons
Version: v1.0.0-alpha.0013-menu-controls
*/

@layer a26.components {
  .a26-pull-down-button {
    appearance: none;
    -webkit-appearance: none;
    min-height: var(--a26-pulldown-button-height);
    padding: 0 12px;
    border: 0;
    border-radius: var(--a26-pulldown-button-radius);
    background: var(--a26-pulldown-button-bg);
    color: var(--a26-text-primary);
    font: var(--a26-font-callout);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--a26-space-2);
    cursor: pointer;
  }

  .a26-pull-down-button:hover { background: var(--a26-button-bg-hover); }
  .a26-pull-down-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--a26-accent) 65%, transparent); outline-offset: 2px; }
  .a26-pull-down-button[data-variant="plain"] { background: transparent; color: var(--a26-accent); }
  .a26-pull-down-button[data-variant="more"] { min-width: var(--a26-control-hit-min); padding-inline: 0; border-radius: var(--a26-radius-pill); }
  .a26-pull-down-button__chevron { color: var(--a26-text-secondary); font-size: 12px; }
}