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

@layer a26.components {
  .a26-pop-up-button {
    appearance: none;
    -webkit-appearance: none;
    min-height: var(--a26-popup-button-height);
    padding: 0 12px;
    border: 1px solid var(--a26-popup-button-border);
    border-radius: var(--a26-popup-button-radius);
    background: var(--a26-popup-button-bg);
    color: var(--a26-text-primary);
    font: var(--a26-font-callout);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--a26-space-3);
    cursor: pointer;
    min-width: 152px;
  }

  .a26-pop-up-button:hover { background: var(--a26-fill-tertiary); }
  .a26-pop-up-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--a26-accent) 65%, transparent); outline-offset: 2px; }
  .a26-pop-up-button__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .a26-pop-up-button__chevron { color: var(--a26-text-secondary); font-size: 12px; }
}