/* =========================================================
   Konkoor Honar Theme
   Bootstrap primary color overrides
   ========================================================= */


/* =========================================================
   Light theme
   ========================================================= */

:root,
[data-bs-theme="light"] {
    --kh-primary: #6f42c1;
    --kh-primary-rgb: 111, 66, 193;

    --kh-primary-hover: #5f37a8;
    --kh-primary-hover-rgb: 95, 55, 168;

    --kh-primary-active: #56309a;
    --kh-primary-active-rgb: 86, 48, 154;

    --kh-primary-subtle: #eee8f8;
    --kh-primary-border-subtle: #d8c9ef;
    --kh-primary-text: #432874;

    --bs-primary: var(--kh-primary);
    --bs-primary-rgb: var(--kh-primary-rgb);

    --bs-primary-text-emphasis: var(--kh-primary-text);
    --bs-primary-bg-subtle: var(--kh-primary-subtle);
    --bs-primary-border-subtle: var(--kh-primary-border-subtle);

    --bs-link-color: var(--kh-primary);
    --bs-link-color-rgb: var(--kh-primary-rgb);

    --bs-link-hover-color: var(--kh-primary-hover);
    --bs-link-hover-color-rgb: var(--kh-primary-hover-rgb);

    --bs-focus-ring-color: rgba(var(--kh-primary-rgb),
            0.25);
}


/* =========================================================
   Dark theme
   ========================================================= */

[data-bs-theme="dark"] {
    --kh-primary: #a98bdc;
    --kh-primary-rgb: 169, 139, 220;

    --kh-primary-hover: #b99fe4;
    --kh-primary-hover-rgb: 185, 159, 228;

    --kh-primary-active: #c4ace9;
    --kh-primary-active-rgb: 196, 172, 233;

    --kh-primary-subtle: #2c213d;
    --kh-primary-border-subtle: #5d467f;
    --kh-primary-text: #ddcef3;

    --bs-primary: var(--kh-primary);
    --bs-primary-rgb: var(--kh-primary-rgb);

    --bs-primary-text-emphasis: var(--kh-primary-text);
    --bs-primary-bg-subtle: var(--kh-primary-subtle);
    --bs-primary-border-subtle: var(--kh-primary-border-subtle);

    --bs-link-color: var(--kh-primary);
    --bs-link-color-rgb: var(--kh-primary-rgb);

    --bs-link-hover-color: var(--kh-primary-hover);
    --bs-link-hover-color-rgb: var(--kh-primary-hover-rgb);

    --bs-focus-ring-color: rgba(var(--kh-primary-rgb),
            0.3);
}


/* =========================================================
   Selection
   ========================================================= */

::selection {
    color: #fff;
    background: rgba(var(--kh-primary-rgb),
            0.85);
}


/* =========================================================
   Primary button
   ========================================================= */

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--kh-primary);
    --bs-btn-border-color: var(--kh-primary);

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--kh-primary-hover);
    --bs-btn-hover-border-color: var(--kh-primary-hover);

    --bs-btn-focus-shadow-rgb: var(--kh-primary-rgb);

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--kh-primary-active);
    --bs-btn-active-border-color: var(--kh-primary-active);

    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--kh-primary);
    --bs-btn-disabled-border-color: var(--kh-primary);
}


/* =========================================================
   Outline primary button
   ========================================================= */

.btn-outline-primary {
    --bs-btn-color: var(--kh-primary);
    --bs-btn-border-color: var(--kh-primary);

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--kh-primary);
    --bs-btn-hover-border-color: var(--kh-primary);

    --bs-btn-focus-shadow-rgb: var(--kh-primary-rgb);

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--kh-primary-active);
    --bs-btn-active-border-color: var(--kh-primary-active);

    --bs-btn-disabled-color: var(--kh-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--kh-primary);
}


/* =========================================================
   Link button
   ========================================================= */

.btn-link {
    --bs-btn-color: var(--kh-primary);
    --bs-btn-hover-color: var(--kh-primary-hover);
    --bs-btn-active-color: var(--kh-primary-active);
    --bs-btn-focus-shadow-rgb: var(--kh-primary-rgb);
}


/* =========================================================
   Navigation
   ========================================================= */

.nav-pills {
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: var(--kh-primary);
}

.nav-link:focus-visible {
    box-shadow:
        0 0 0 0.25rem rgba(var(--kh-primary-rgb),
            0.25);
}


/* =========================================================
   Dropdown
   ========================================================= */

.dropdown-menu {
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--kh-primary);
}

.dropdown-menu-dark {
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--kh-primary);
}


/* =========================================================
   Pagination
   ========================================================= */

.pagination {
    --bs-pagination-color: var(--kh-primary);

    --bs-pagination-hover-color: var(--kh-primary-hover);

    --bs-pagination-focus-color: var(--kh-primary-hover);
    --bs-pagination-focus-box-shadow:
        0 0 0 0.25rem rgba(var(--kh-primary-rgb),
            0.25);

    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--kh-primary);
    --bs-pagination-active-border-color: var(--kh-primary);
}


/* =========================================================
   Progress
   ========================================================= */

.progress,
.progress-stacked {
    --bs-progress-bar-color: #fff;
    --bs-progress-bar-bg: var(--kh-primary);
}


/* =========================================================
   List group
   ========================================================= */

.list-group {
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: var(--kh-primary);
    --bs-list-group-active-border-color: var(--kh-primary);
}


/* =========================================================
   Form checks
   ========================================================= */

.form-check-input:focus {
    border-color: rgba(var(--kh-primary-rgb),
            0.65);

    box-shadow:
        0 0 0 0.25rem rgba(var(--kh-primary-rgb),
            0.2);
}

.form-check-input:checked {
    background-color: var(--kh-primary);
    border-color: var(--kh-primary);
}

.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--kh-primary);
    border-color: var(--kh-primary);
}


/* =========================================================
   Form range
   ========================================================= */

.form-range {
    --bs-form-range-thumb-bg: var(--kh-primary);
}


/* =========================================================
   Accordion
   ========================================================= */

.accordion {
    --bs-accordion-btn-focus-box-shadow:
        0 0 0 0.25rem rgba(var(--kh-primary-rgb),
            0.2);

    --bs-accordion-active-color:
        var(--bs-primary-text-emphasis);

    --bs-accordion-active-bg:
        var(--bs-primary-bg-subtle);
}

/*
Bootstrap uses hard-coded SVG colors for accordion arrows.
This replacement uses currentColor, so it follows the theme.
*/

.accordion-button::after {
    width: 0.7rem;
    height: 0.7rem;

    border-inline-end:
        2px solid currentColor;

    border-block-end:
        2px solid currentColor;

    background-image: none;
    background-size: auto;

    transform: rotate(45deg);

    transition:
        transform 0.2s ease-in-out;
}

.accordion-button:not(.collapsed)::after {
    background-image: none;
    transform: rotate(-135deg);
}


/* =========================================================
   Focus helpers
   ========================================================= */

.page-link:focus,
.dropdown-item:focus,
.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--kh-primary-rgb),
            0.65);
}


/* =========================================================
   Dark button contrast
   ========================================================= */

[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-primary:active {
    --bs-btn-color: #17121f;
    --bs-btn-hover-color: #17121f;
    --bs-btn-active-color: #17121f;
}