/* Button styling
 * All button styling now lives here.
 */

/* Base button */
.button {
    padding: 1.25rem 1.25rem;
    background: var(--brand-1);
    color: #fff;
    display: inline-block;
    border-radius: var(--border-radius);
    line-height: 1;
    font-size: clamp(1.4rem, 1.8vw, 1.8rem);
    transition: all .15s ease-in-out;
}
.button:hover,
.button.current {
    background: var(--brand-2);
    color: #fff;
    transition: background .15s ease-in-out;
}

/* Button variants */
.button.toast-primary {
    background: #FF6F00;
    color: #fff;
}
.button.toast-primary:hover {
    background: #8E8E8E;
    color: #fff;
}
.button.toast-primary:focus {
    background: #FF913D;
    color: #fff;
}

.button.toast-secondary {
    background: #006666;
    color: #fff;
}
.button.toast-secondary:hover {
    background: #8E8E8E;
    color: #fff;
}
.button.toast-secondary:focus {
    background: #009999;
    color: #fff;
}

.button.toast-tertiary {
    background: #009999;
    color: #fff;
}
.button.toast-tertiary:hover {
    background: #8E8E8E;
    color: #fff;
}
.button.toast-tertiary:focus {
    background: #006666;
    color: #fff;
}

/* Layout helpers */
.button.display-block { width: 100%; }
p > .button + .button { margin-left: 2rem; }
:is(h1, h2, h3, h4, h5, h6, ul, ol, blockquote, table) + :is(.button, .button-block) { margin-top: clamp(1.5rem, 4vw, 4rem); }

/* Button blocks */
.button-block { margin-top: auto; padding-top: 4rem; }
.button-block.bottom { position: absolute; bottom: 6rem; }

/* Buttons on coloured backgrounds */
.has-bg .button.toast-primary{background-color: #FF6F00}
.has-bg .button.toast-primary:hover{background-color: #8E8E8E}

/* :is(.bg1, .bg2, .bg3, .bg4, .bg5, .bg6, .bg7, .bg8) .button:hover,
.has-bg .button:hover { background: rgba(0,0,0,.5); } */