.btn {
    --bs-btn-disabled-opacity: 0.5;
    --bs-btn-hover-bg: var(--hover-color);
    border: unset;
    display: inline-block;
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    gap: 4px;
}

.btn-primary,
.btn-accent,
.btn-accent-outline {
    --bs-btn-disabled-opacity: 0.5;
    min-width: 320px;
    min-height: 64px;
    padding: 16px;
    border-radius: 40px;
    box-shadow: 0px 4px 20px 0px rgba(var(--bs-primary-rgb), 0.20);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border: unset;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    gap: 8px;
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
}

.btn-primary {
    --bs-btn-color: var(--btn-primary);
    --bs-btn-bg: var(--btn-primary-bg);
    --bs-btn-hover-color: var(--btn-primary);
    --bs-btn-hover-bg: var(--btn-primary-hover-bg);
    --bs-btn-active-color: var(--btn-primary);
    --bs-btn-active-bg: var(--btn-primary-hover-bg);
    --bs-btn-disabled-color: var(--btn-primary);
    --bs-btn-disabled-bg: var(--btn-primary-bg);
    --icon-primary: var(--btn-primary);
}

.btn-accent {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--accent-color);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--accent-color-hover);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--accent-color-hover);
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--accent-color);
    --icon-primary: var(--bs-white);
}

.btn-accent-outline {
    --bs-btn-color: var(--accent-color);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--accent-color);
    --bs-btn-hover-bg: rgba(242, 103, 35, 0.08);
    --icon-primary: var(--accent-color);
    border: 1px solid var(--accent-color);
    box-shadow: unset;
}

.btn-mini {
    --bs-btn-disabled-opacity: 0.5;
    --icon-primary: var(--btn-primary);
    border: unset;
    display: inline-block;
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    padding: 4px 8px;
    border-radius: 8px;
    gap: 4px;
    color: var(--btn-primary);
    background-color: var(--btn-primary-bg);
}

.btn-mini.accent {
    --icon-primary: var(--bs-white);
    color: var(--bs-white);
    background-color: var(--accent-color);
}

.btn-primary:hover,
.btn-mini:hover {
    background-color: var(--btn-primary-hover-bg);
}

.btn-primary:active,
.btn-mini:active {
    background-color: var(--btn-primary-bg);
}

.btn-primary:disabled,
.btn-primary.disabled,
.btn-mini:disabled,
.btn-mini.disabled {
    opacity: var(--bs-btn-disabled-opacity);
    pointer-events: none;
}

.btn-accent:hover,
.btn-mini.accent:hover {
    background-color: var(--accent-color-hover);
}

.btn-accent:active,
.btn-mini.accent:active {
    background-color: var(--accent-color);
}

.btn-accent:disabled,
.btn-accent.disabled,
.btn-mini.accent:disabled,
.btn-mini.accent.disabled {
    opacity: var(--bs-btn-disabled-opacity);
    pointer-events: none;
}

.btn-accent-outline:hover {
    background-color: var(--bs-btn-hover-bg);
}

.btn-accent-outline:active {
    background-color: transparent;
}

.btn-accent-outline:disabled,
.btn-accent-outline.disabled {
    opacity: var(--bs-btn-disabled-opacity);
    pointer-events: none;
}

.btn-icon {
    --bs-btn-disabled-opacity: 0.5;
    display: inline-block;
    color: transparent;
    background-color: transparent;
    border: unset;
    padding: 4px !important;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 50%;
}

.btn-icon:hover {
    background-color: var(--hover-color);
}

.btn-icon:active {
    background-color: transparent;
}

.btn-icon:disabled,
.btn-icon.disabled {
    opacity: var(--bs-btn-disabled-opacity);
    pointer-events: none;
}

/** 0px - 576 px */
@media (max-width: 576px) {

    .btn-primary,
    .btn-accent,
    .btn-accent-outline {
        width: 100%;
    }

    .btn-mini {
        width: unset;
    }
}