/* Bootstrap Button Overrides */

/* Primary Button */
.btn-primary {
    background-color: var(--wuufy-primary);
    border-color: var(--wuufy-primary);
    color: white;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--wuufy-primary-hover);
    border-color: var(--wuufy-primary-hover);
    color: white;
}

.btn-outline-primary {
    color: var(--wuufy-primary);
    border-color: var(--wuufy-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--wuufy-primary);
    border-color: var(--wuufy-primary);
    color: white;
}

/* Secondary Button */
.btn-secondary {
    background-color: var(--wuufy-secondary);
    border-color: var(--wuufy-secondary);
    color: white;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--wuufy-secondary-hover);
    border-color: var(--wuufy-secondary-hover);
    color: white;
}

.btn-outline-secondary {
    color: var(--wuufy-secondary);
    border-color: var(--wuufy-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--wuufy-secondary);
    border-color: var(--wuufy-secondary);
    color: white;
}

/* Success Button */
.btn-success {
    background-color: var(--wuufy-success);
    border-color: var(--wuufy-success);
    color: white;
}

.btn-success:hover,
.btn-success:focus {
    background-color: var(--wuufy-success-hover);
    border-color: var(--wuufy-success-hover);
    color: white;
}

.btn-outline-success {
    color: var(--wuufy-success);
    border-color: var(--wuufy-success);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: var(--wuufy-success);
    border-color: var(--wuufy-success);
    color: white;
}

/* Info Button */
.btn-info {
    background-color: var(--wuufy-info);
    border-color: var(--wuufy-info);
    color: white;
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--wuufy-info-hover);
    border-color: var(--wuufy-info-hover);
    color: white;
}

.btn-outline-info {
    color: var(--wuufy-info);
    border-color: var(--wuufy-info);
}

.btn-outline-info:hover,
.btn-outline-info:focus {
    background-color: var(--wuufy-info);
    border-color: var(--wuufy-info);
    color: white;
}

/* Warning Button */
.btn-warning {
    background-color: var(--wuufy-warning);
    border-color: var(--wuufy-warning);
    color: white;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--wuufy-warning-hover);
    border-color: var(--wuufy-warning-hover);
    color: white;
}

.btn-outline-warning {
    color: var(--wuufy-warning);
    border-color: var(--wuufy-warning);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background-color: var(--wuufy-warning);
    border-color: var(--wuufy-warning);
    color: white;
}

/* Danger Button */
.btn-danger {
    background-color: var(--wuufy-danger);
    border-color: var(--wuufy-danger);
    color: white;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--wuufy-danger-hover);
    border-color: var(--wuufy-danger-hover);
    color: white;
}

.btn-outline-danger {
    color: var(--wuufy-danger);
    border-color: var(--wuufy-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: var(--wuufy-danger);
    border-color: var(--wuufy-danger);
    color: white;
}

/* Dark Button */
.btn-dark {
    background-color: var(--wuufy-dark);
    border-color: var(--wuufy-dark);
    color: white;
}

.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--wuufy-primary-hover);
    border-color: var(--wuufy-primary-hover);
    color: white;
}

/* Light Button */
.btn-light {
    background-color: var(--wuufy-light);
    border-color: var(--wuufy-light);
    color: var(--wuufy-primary);
}

.btn-light:hover,
.btn-light:focus {
    background-color: #E9ECEF;
    border-color: #E9ECEF;
    color: var(--wuufy-primary);
}

/* Button Focus States */
.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
}

.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
    box-shadow: 0 0 0 0.2rem rgba(169, 155, 199, 0.25);
}

.btn-outline-success:focus,
.btn-outline-success.focus {
    box-shadow: 0 0 0 0.2rem rgba(107, 140, 90, 0.25);
}