button {
    /* Reset browser button styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;

    &:hover {
        cursor: pointer;
    }

    /* Black Button (primary style) */
    &.black-button {
        background-color: var(--alt-pink);
        color: var(--black);
        padding: var(--golden-xs) var(--golden-l);
        font-weight: 700;

        &:hover {
            background-color: var(--pink);
            color: var(--white);
        }
    }
}

/* Button styles for links and inputs */
a.black-button,
input.black-button {
    background-color: var(--alt-pink);
    color: var(--black);
    padding: var(--golden-xs) var(--golden-l);
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    margin: var(--golden-xs);
    border: none;
    cursor: pointer;

    &:hover {
        background-color: var(--pink);
        color: var(--white);
    }

    /* Compact table button variant */
    &.table-button {
        font-weight: 700;
        padding: 0;
    }
}

/* Button container */
.buttons {
    text-align: center;
    margin-top: var(--golden-m);
}