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

/* Base button */
.button {
    padding: 1rem 2rem;
    background: var(--brand-1);
    color: #fff;
    display: inline-block;
    border-radius: var(--border-radius);
    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: var(--brand-1);
    color: #fff;
	border: 1px solid var(--brand-1);
}
.button.toast-primary:hover {
    background: var(--brand-3);
    color: #fff;
	border: 1px solid #fff;

}
.button.toast-secondary {
    background: var(--brand-2);
    color: #fff;
	border: 1px solid #fff;
	font-size: 1.5rem;
}
.button.toast-secondary:hover {
    background: var(--brand-2);
    color: var(--brand-1);
	border: 1px solid var(--brand-1);

}
.button.toast-tertiary {
    background: #fff;
    color: var(--brand-1);
    outline: .1rem solid var(--brand-1);
}
.button.toast-tertiary:hover {
    background: #fff;
    color: var(--brand-2);
    outline: .1rem solid var(--brand-2);
}

/* 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 */
:is(.bg1, .bg3, .bg4, .bg5, .bg6, .bg7, .bg8) .button,
.has-bg .button { background: var(--brand-2); }
:is(.bg2) .button { background: var(--brand-1); }
:is(.bg1, .bg2, .bg3, .bg4, .bg5, .bg6, .bg7, .bg8) .button:hover,
.has-bg .button:hover { background: rgba(0,0,0,.5); }