/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
    --custom-purple: #361291;
    --custom-purple-dark: #1f065f;
    --custom-purple-light: #805bdd;

    --custom-yellow: #ffb307;
    --custom-yellow-dark: #e19e02;
    --custom-yellow-light: #f0be48;

    --bs-primary-rgb: 128, 91, 221;
    --bs-info-rgb: 255, 179, 7;

    --bs-link-color: var(--custom-purple);
    --bs-link-color-rgb: 54, 18, 145;
}

.btn-outline-primary {
    --bs-btn-color: var(--custom-purple);
    --bs-btn-border-color: var(--custom-purple);
    --bs-btn-hover-bg: var(--custom-purple);
    --bs-btn-hover-border-color: var(--custom-purple-dark);
    --bs-btn-active-bg: var(--custom-purple-dark);
    --bs-btn-active-border-color: var(--custom-purple-dark);
    --bs-btn-disabled-color: var(--custom-purple-light);
    --bs-btn-disabled-border-color: var(--custom-purple-light);
}

.btn-primary {
    --bs-btn-bg: var(--custom-purple);
    --bs-btn-border-color: var(--custom-purple);
    --bs-btn-hover-bg: var(--custom-purple-dark);
    --bs-btn-hover-border-color: var(--custom-purple-dark);
    --bs-btn-active-bg: var(--custom-purple-dark);
    --bs-btn-active-border-color: var(--custom-purple-dark);
    --bs-btn-disabled-bg: var(--custom-purple-light);
    --bs-btn-disabled-border-color: var(--custom-purple-light);
}

.btn-outline-info {
    --bs-btn-color: var(--custom-yellow);
    --bs-btn-border-color: var(--custom-yellow);
    --bs-btn-hover-bg: var(--custom-yellow);
    --bs-btn-hover-border-color: var(--custom-yellow-dark);
    --bs-btn-active-bg: var(--custom-yellow-dark);
    --bs-btn-active-border-color: var(--custom-yellow-dark);
    --bs-btn-disabled-color: var(--custom-yellow-light);
    --bs-btn-disabled-border-color: var(--custom-yellow-light);
    --bs-btn-hover-color: #ffffff;
}

.btn-info {
    --bs-btn-bg: var(--custom-yellow);
    --bs-btn-border-color: var(--custom-yellow);
    --bs-btn-hover-bg: var(--custom-yellow-dark);
    --bs-btn-hover-border-color: var(--custom-yellow-dark);
    --bs-btn-active-bg: var(--custom-yellow-dark);
    --bs-btn-active-border-color: var(--custom-yellow-dark);
    --bs-btn-disabled-bg: var(--custom-yellow-light);
    --bs-btn-disabled-border-color: var(--custom-yellow-light);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
}

.btn-group-custom {
    form:first-of-type {
        button {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            border-right: 0;
        }
    }
    form:not(:first-child):not(:last-child) {
        button {
            border-radius: 0
        }
    }
    form:last-of-type {
        button {
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
            border-left: 0;
        }
    }
}

.nav-link {
    &.active {
        color: var(--bs-dark)
    }

    &:hover {
        color: var(--bs-dark)
    }
}