/* -------------------------------------------------- */
/* --------------------- PRIMARY -------------------- */
/* -------------------------------------------------- */
.bg--button--primary {
    --background: var(--accent-1);
    --color: white;
    --border: 3px solid transparent;
}

.bg--button--primary:hover {
    --background: var(--accent-1-dark);
    --color: white;
}

.bg--button--primary__disabled {
    --background: var(--accent-1-light);
    --opacity: 0.75;
    --cursor: not-allowed;
}

.bg--button--primary__disabled:hover {
    --background: var(--accent-1-light);
    --opacity: 0.75;
    --cursor: not-allowed;
}

.bg--button--primary__hollow {
    --background: transparent;
    --border: 2px solid var(--accent-1-dark);
    --color: var(--accent-1-dark);
}

.bg--button--primary__hollow:hover {
    --background: var(--accent-1-dark);
    --color: white;
}

.bg--button--primary__hollow:active {
    --background: var(--accent-1-dark);
    --color: white;
}

.bg--button--primary__hollow:focus {
    --background: var(--accent-1-dark);
    --color: white;
}

.bg--button--primary__plain {
    --background: transparent;
    --color: var(--neutral-dark);
}

.bg--button--primary__plain:hover {
    --background: var(--accent-1-light);
}

.bg--button--primary__plain:active {
    --background: var(--accent-1-light);
}

.bg--button--primary__plain:focus {
    --background: var(--accent-1-light);
    --button-border: 3px solid var(--accent-1);
}

/* -------------------------------------------------- */
/* --------------------- ACCENT --------------------- */
/* -------------------------------------------------- */

.bg--button--accent {
    --background: var(--brand);
    --color: white;
    --border: 3px solid transparent;
}

.bg--button--accent:hover {
    --background: var(--brand-x-dark);
}

.bg--button--accent:active {
    --background: var(--brand-light);
    --color: var(--brand-x-dark);
}

.bg--button--accent:focus {
    --background: var(--brand-dark);
    --button-border: 3px solid var(--accent-2-dark);
}

.bg--button--accent__disabled {
    --background: var(--brand);
    --opacity: 0.75;
    --cursor: not-allowed;
}

.bg--button--accent__disabled:hover {
    --background: var(--brand);
    --opacity: 0.75;
    --cursor: not-allowed;
}

.bg--button--accent__hollow {
    --background: transparent;
    --border: 2px solid var(--brand);
    --color: var(--brand);
}

.bg--button--accent__hollow__disabled {
    --color: var(--brand);
    --border: 2px solid transparent;
    --opacity: 0.75;
    --cursor: not-allowed;
}

.bg--button--accent__hollow:hover {
    --background: var(--brand-x-dark);
    --color: white;
    --border: 2px solid transparent;
}

.bg--button--accent__hollow:active {
    --color: var(--brand-x-dark);
    --border: 2px solid transparent;
}

.bg--button--accent__hollow:focus {
    --background: var(--brand-x-dark);
    --color: white;
    --button: 2px solid var(--brand-x-dark);
}

.bg--button--accent__plain {
    --background: transparent;
    --color: var(--neutral-dark);
    --border: 3px solid transparent;
}

.bg--button--accent__plain__disabled {
    --opacity: 0.75;
    --cursor: not-allowed;
}

.bg--button--accent__plain:hover {
    --color: var(--accent-2-dark);
}

.bg--button--accent__plain:active {
    --color: var(--accent-2-dark);
}

.bg--button--accent__plain:focus {
    --background: var(--accent-1-light);
    --button-border: 3px solid var(--accent-2-dark);
    --color: var(--accent-2);
}