/**
 * Buttons: GB buttons, native buttons and submit inputs.
 *
 * Variants (add as a class on the button):
 *   (none)                 primary, --btn-bg / --btn-font-clr
 *   btn-alternate-color    swapped primary colors
 *   btn-no-bg              text link with an animated underline; the
 *                          underline appears when js/blocks/button.js adds
 *                          .visible on scroll
 *   btn-transparent        outlined, uses the section's text color
 *                          (btn-transparent-light / -dark are kept as aliases)
 * A <span class="gb-button"> renders as disabled.
 */

:root {
    --button-padding: 12px 18px;
}

a.gb-button,
button,
input[type="submit"] {
    padding: var(--button-padding);
    background-color: var(--btn-bg);
    color: var(--btn-font-clr);
    transition: all var(--transition-speed) var(--transition-timing-function);
}

a.gb-button:hover,
button:hover,
input[type="submit"]:hover {
    background-color: var(--btn-hover-bg);
    color: var(--btn-hover-font);
}

/* Swapped colors */
a.gb-button.btn-alternate-color,
button.btn-alternate-color {
    background-color: var(--btn-hover-bg);
    color: var(--btn-hover-font);
}

a.gb-button.btn-alternate-color:hover,
button.btn-alternate-color:hover {
    background-color: var(--btn-bg);
    color: var(--btn-font-clr);
}

/* Outlined */
a.gb-button.btn-transparent,
button.btn-transparent,
a.gb-button.btn-transparent-light,
button.btn-transparent-light,
a.gb-button.btn-transparent-dark,
button.btn-transparent-dark {
    background: none;
    border: 2px solid currentColor;
    color: var(--font-clr);
}

a.gb-button.btn-transparent:hover,
button.btn-transparent:hover,
a.gb-button.btn-transparent-light:hover,
button.btn-transparent-light:hover,
a.gb-button.btn-transparent-dark:hover,
button.btn-transparent-dark:hover {
    background: none;
    color: var(--font-clr);
    opacity: 0.8;
}

/* Disabled */
span.gb-button {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Text link with an animated underline. The underline is a background
   gradient that grows from the left, so the button needs no position,
   overflow or transform: a card link (.post-item-link, .card-link,
   .team-member-link) draws its whole-card hit area with an absolute ::before,
   and any of those on the button would trap that pseudo-element inside the
   button. The underline follows currentColor, so a palette override only
   needs to set color. */
.gb-button.btn-no-bg {
    padding: 5px 0;
    border: 0;
    background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat;
    color: var(--no-bg-btn-clr);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: bold;
    transition: background-size 0.9s ease, color 0.5s ease;
}

/* js/blocks/button.js adds .visible when the link scrolls into view */
.gb-button.btn-no-bg.visible {
    background-size: 20% 2px;
}

/* a.gb-button:hover outranks the base rule, so the fill is cleared here too */
.gb-button.btn-no-bg:hover {
    color: var(--no-bg-btn-hover-clr);
    background-color: transparent;
    background-size: 100% 2px;
}