/*
 * Buttons and button-shaped links.
 *
 * Two variants, because the surface has two weights of action: the one thing
 * to do next (solid accent) and everything else (soft accent). A third,
 * quieter text action exists on the section headers and lives there.
 *
 * base.css has already stripped Foundation's button styling, so these rules
 * describe the button rather than undoing one.
 */

.shop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--shop-space-2);
    min-height: 48px;
    padding: 0 var(--shop-space-5);
    border: 1px solid transparent;
    border-radius: var(--shop-radius-md);
    font-size: var(--shop-text-control);
    font-weight: var(--shop-weight-bold);
    line-height: var(--shop-leading-tight);
    text-align: center;
    text-decoration: none;
    transition:
        background-color var(--shop-duration) var(--shop-ease),
        border-color var(--shop-duration) var(--shop-ease);
}

.shop-btn svg {
    flex: none;
    width: 18px;
    height: 18px;
}

/* Solid ---------------------------------------------------------------------- */

.shop-btn--primary,
.shop-btn--primary:hover,
.shop-btn--primary:focus {
    background: var(--shop-accent);
    color: #fff;
    text-decoration: none;
}

.shop-btn--primary:hover {
    background: var(--shop-accent-strong);
}

/* Soft ------------------------------------------------------------------------
   The border is transparent rather than absent so the two variants are the
   same height, and so Windows high-contrast mode still draws an edge. */

.shop-btn--soft,
.shop-btn--soft:hover,
.shop-btn--soft:focus {
    background: var(--shop-accent-soft);
    color: var(--shop-accent);
    text-decoration: none;
}

.shop-btn--soft:hover {
    background: var(--shop-accent-soft-hover);
}

.shop-btn[aria-busy="true"] {
    opacity: 0.6;
    pointer-events: none;
}

/* Disabled ---------------------------------------------------------------------
   combined.css carries Foundation's own button styling, and its
   `button[disabled]` rule - Foundation's 2011 blue, a darker border and
   opacity .7 - sits at (0,1,1), which outranks .shop-btn at (0,1,0). So every
   button in this design system turns blue the moment it is genuinely disabled,
   whatever variant it is. The filter sheet's footer is where it was noticed;
   it is not the only consumer - webshop/quote.html disables its .shop-btn
   --primary pay buttons between submit and navigation - so this fixes those
   too.

   Re-asserting each variant at (0,2,0) is enough to win it back - no !important
   needed. The :hover/:focus pairs are listed because Foundation's own
   `button[disabled]:hover` is (0,2,1) and would otherwise take it back again on
   the way past.

   The dim is stated here as well, at the same 0.6 the aria-busy rule above
   uses. Without it the two states dim by different amounts from different
   stylesheets - a disabled button inherits Foundation's opacity .7 while a busy
   one takes this file's .6 - and the day combined.css goes, a disabled button
   would lose its dim altogether with nothing in the design system to replace
   it. */
.shop-btn:disabled {
    cursor: default;
    opacity: 0.6;
}

.shop-btn--primary:disabled,
.shop-btn--primary:disabled:hover,
.shop-btn--primary:disabled:focus {
    background: var(--shop-accent);
    border-color: transparent;
    color: #fff;
}

.shop-btn--soft:disabled,
.shop-btn--soft:disabled:hover,
.shop-btn--soft:disabled:focus {
    background: var(--shop-accent-soft);
    border-color: transparent;
    color: var(--shop-accent);
}