/**
 * SCOPE: Apexus Buttons
 * SELECTOR: .apexus-button*, .apexus-icon-button
 * Only include styles specific buttons used by all pages and components.
 */

/***** Text Buttons *****/
.apexus-button,
.apexus-button-no-caps,
.apexus-button-bold,
.apexus-button-primary,
.apexus-button-secondary {
    all: unset;
    display: inline-block;
    width: fit-content;
    box-sizing: border-box;

    padding: var(--apexus-button-padding);
    border-radius: var(--apexus-button-border-radius);
    box-shadow: var(--apexus-button-box-shadow);

    color: var(--apexus-button-color);
    font-size: var(--apexus-font-size);
    font-weight: var(--apexus-button-font-weight);
    font-family: var(--apexus-font-family);
    line-height: var(--apexus-line-height);
    text-transform: uppercase;
    text-align: center;

    cursor: pointer;
}
.apexus-button:focus,
.apexus-button-no-caps:focus,
.apexus-button-bold:focus,
.apexus-button-primary:focus,
.apexus-button-secondary:focus {
    outline: unset;
}
a.apexus-button:hover,
a.apexus-button-no-caps:hover,
a.apexus-button-bold:hover,
a.apexus-button-primary:hover,
a.apexus-button-secondary:hover {
    color: var(--apexus-color-white);
    text-decoration: none;
}
.apexus-button-no-caps {
    text-transform: unset;
}
.apexus-button-primary {
    background-color: var(--apexus-button-background-color);
}
.apexus-button-primary:hover {
    background-color: var(--apexus-button-background-color-hover);
}
.apexus-button-secondary {
    background-color: var(--apexus-button-background-color-secondary);
}
.apexus-button-secondary:hover {
    background-color: var(--apexus-button-background-color-secondary-hover);
}

/***** Icon Buttons *****/
.apexus-icon-button {
    all: unset;
    cursor: pointer;
    color: var(--apexus-color-black);
    font-size: var(--apexus-icon-width);
    font-weight: var(--apexus-font-weight-heavy-3);
    line-height: 0.65;
    opacity: 0.5;
}
.apexus-icon-button:hover {
    opacity: 1;
}

/***** Link Buttons *****/
.apexus-link-button {
    cursor: pointer;
    color: var(--apexus-color-blue);
}
.apexus-link-button:hover {
    text-decoration: underline;
}