/* https://www.cssscript.com/dark-mode-switcher-for-bootstrap-5/ */
@use "sass:color";
@use "sass:map";

@import "variables";

*:hover > .hover-invertible {
    filter: invert(1);
}

body[data-theme="dark"] {
    background-image:
            linear-gradient(74deg,
                    rgba(236, 236, 236,0.02) 0%,
                    rgba(236, 236, 236,0.02) 13%,
                    transparent 13%,
                    transparent 64%,
                    rgba(100, 100, 100,0.02) 64%,
                    rgba(100, 100, 100,0.02) 71%,
                    rgba(200, 200, 200,0.02) 71%,
                    rgba(200, 200, 200,0.02) 100%),
            linear-gradient(170deg,
                    rgba(40, 40, 40,0.02) 0%,
                    rgba(40, 40, 40,0.02) 1%,
                    transparent 1%,
                    transparent 60%,
                    rgba(50, 50, 50,0.02) 60%,
                    rgba(50, 50, 50,0.02) 80%,
                    rgba(210, 210, 210,0.02) 80%,
                    rgba(210, 210, 210,0.02) 100%),
            linear-gradient(118deg,
                    rgba(170, 170, 170,0.02) 0%,
                    rgba(170, 170, 170,0.02) 30%,
                    transparent 30%,
                    transparent 43%,
                    rgba(130, 130, 130,0.02) 43%,
                    rgba(130, 130, 130,0.02) 47%,
                    rgba(150, 150, 150,0.02) 47%,
                    rgba(150, 150, 150,0.02) 100%),
            linear-gradient(249deg,
                    rgba(120, 120, 120,0.02) 0%,
                    rgba(120, 120, 120,0.02) 8%,
                    transparent 8%, transparent 47%,
                    rgba(140, 140, 140,0.02) 47%,
                    rgba(140, 140, 140,0.02) 61%,
                    rgba(230, 230, 230,0.02) 61%,
                    rgba(230, 230, 230,0.02) 100%),
            linear-gradient(90deg,
                    rgb(33,37,41),
                    rgb(33,37,41)
            );
    color: $light;

    --bs-border-color: rgba(66, 70, 73, 0.5);
    --bs-primary-inverted: #{$primary};

    a { color: $primary-dark; }
    a:hover { color: color.adjust($primary-dark, $lightness: 10%, $space: hsl); }
    .text-primary { color: $primary-dark !important; }
    .text-light { color: $dark !important; }
    .text-dark { color: $light !important; }
    .btn-primary { color: $light; }
    .btn-primary:hover { color: color.adjust($white, $lightness: -10%, $space: hsl); }
    .btn-outline-primary { color: $light; &:hover {color: $light;}}
    .btn-outline-success { color: color.adjust($success, $lightness: 20%, $space: hsl); &:hover {color: $light;} }
    .alert-info {
        background-color: color.adjust($info, $lightness: -35%, $space: hsl);
        border-color: color.adjust($info, $lightness: 25%, $space: hsl);
        color: $light;
    }

    /* BUTTONS */

    .btn-link { color: $primary-dark; }
    .btn-link:hover { color: color.adjust($primary-dark, $lightness: 10%, $space: hsl); }
    .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
    .btn-dark { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
    .btn-dark:hover { color: #000; background-color: #f9fafb; border-color: #f9fafb; }
    .btn-check:focus + .btn-dark,
    .btn-dark:focus { color: #000; background-color: #f9fafb; border-color: #f9fafb; box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); }
    .btn-check:checked + .btn-dark,
    .btn-check:active + .btn-dark,
    .btn-dark:active,
    .btn-dark.active,
    .show > .btn-dark.dropdown-toggle { color: #000; background-color: #f9fafb; border-color: #f9fafb; }
    .btn-check:checked + .btn-dark:focus,
    .btn-check:active + .btn-dark:focus,
    .btn-dark:active:focus,
    .btn-dark.active:focus,
    .show > .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); }
    .btn-dark:disabled,
    .btn-dark.disabled { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
    .btn-light { color: #fff; background-color: #212529; border-color: #212529; }
    .btn-light:hover { color: #fff; background-color: #1c1f23; border-color: #1a1e21; }
    .btn-check:focus + .btn-light,
    .btn-light:focus { color: #fff; background-color: #1c1f23; border-color: #1a1e21; box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); }
    .btn-check:checked + .btn-light,
    .btn-check:active + .btn-light,
    .btn-light:active,
    .btn-light.active,
    .show > .btn-light.dropdown-toggle { color: #fff; background-color: #1a1e21; border-color: #191c1f; }
    .btn-check:checked + .btn-light:focus,
    .btn-check:active + .btn-light:focus,
    .btn-light:active:focus,
    .btn-light.active:focus,
    .show > .btn-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); }
    .btn-light:disabled,
    .btn-light.disabled { color: #fff; background-color: #212529; border-color: #212529; }
    .btn-outline-dark { color: #f8f9fa; border-color: #f8f9fa; }
    .btn-outline-dark:hover { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
    .btn-check:focus + .btn-outline-dark,
    .btn-outline-dark:focus { box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); }
    .btn-check:checked + .btn-outline-dark,
    .btn-check:active + .btn-outline-dark,
    .btn-outline-dark:active,
    .btn-outline-dark.active,
    .btn-outline-dark.dropdown-toggle.show { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
    .btn-check:checked + .btn-outline-dark:focus,
    .btn-check:active + .btn-outline-dark:focus,
    .btn-outline-dark:active:focus,
    .btn-outline-dark.active:focus,
    .btn-outline-dark.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); }
    .btn-outline-dark:disabled,
    .btn-outline-dark.disabled { color: #f8f9fa; background-color: transparent; }
    .btn-outline-light { color: #212529; border-color: #212529; }
    .btn-outline-light:hover { color: #fff; background-color: #212529; border-color: #212529; }
    .btn-check:focus + .btn-outline-light,
    .btn-outline-light:focus { box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); }
    .btn-check:checked + .btn-outline-light,
    .btn-check:active + .btn-outline-light,
    .btn-outline-light:active,
    .btn-outline-light.active,
    .btn-outline-light.dropdown-toggle.show { color: #fff; background-color: #212529; border-color: #212529; }
    .btn-check:checked + .btn-outline-light:focus,
    .btn-check:active + .btn-outline-light:focus,
    .btn-outline-light:active:focus,
    .btn-outline-light.active:focus,
    .btn-outline-light.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); }
    .btn-outline-light:disabled,
    .btn-outline-light.disabled { color: #212529; background-color: transparent; }

    /* DROPDOWNS */

    .dropdown-menu { color: #dee2e6; background-color: #343a40; border-color: rgba(0, 0, 0, 0.15); }
    .dropdown-menu .dropdown-item { color: #dee2e6; }
    .dropdown-menu .dropdown-item:hover,
    .dropdown-menu .dropdown-item:focus { color: #fff; background-color: rgba(255, 255, 255, 0.15); }
    .dropdown-menu .dropdown-item.active,
    .dropdown-menu .dropdown-item:active { color: #fff }
    .dropdown-menu .dropdown-item.disabled,
    .dropdown-menu .dropdown-item:disabled { color: #adb5bd; }
    .dropdown-menu .dropdown-divider { border-color: rgba(0, 0, 0, 0.15); }
    .dropdown-menu .dropdown-item-text { color: #dee2e6; }
    .dropdown-menu .dropdown-header { color: #adb5bd; }

    /* LIST GROUPS */

    .list-group-item-action { color: #fff; }
    .list-group-item-action:hover,
    .list-group-item-action:focus { color: #fff; background-color: #333; }
    .list-group-item-action:active { color: #212529; background-color: #e9ecef; }
    .list-group-item { color: #eee; background-color: #111; border: 1px solid #333; }
    .list-group-item-bg { background-color: #111; }
    .list-group-item:not(:first-child) { border-top: none; }
    .list-group-item.disabled,
    .list-group-item:disabled { color: #fff; background-color: #000; }
    .list-group-item.active { color: #fff; background-color: $primary; border-color: $primary; }

    /* TABS */

    .nav-tabs { border-bottom: 1px solid #000; }
    .nav-tabs .nav-link:hover,
    [data-theme="dark"].nav-tabs .nav-link:focus { border-color: #212529 #212529 #000; }
    .nav-tabs .nav-link.disabled { color: #333; }
    .nav-tabs .nav-link.active,
    .nav-tabs .nav-item.show .nav-link { color: #fff; background-color: #000; border-color: #212529 #212529 #000; }

    /* PAGINATION */

    .page-link { color: #fff; background-color: #111; border: 1px solid #333; }
    .page-link:hover { color: #fff; background-color: $gray-600; border-color: $gray-600; }
    .page-link:focus { background-color: $gray-600; border-color: $gray-600; }
    .page-item.active .page-link { background-color: $primary; border-color: $primary; }
    .page-item.disabled .page-link { background-color: #333; border-color: #333; }

    /* BACKGROUNDS */

    .bg-light, .text-bg-light { background-color: #111 !important; }
    .bg-dark, .text-bg-dark { background-color: #f8f9fa !important; }
    .text-bg-light { color: #fff !important; }
    .text-bg-dark { color: #000 !important; }
    .bg-white { background-color: #000 !important; }
    .bg-white.text-white,
    .bg-dark.text-white,
    .bg-warning.text-dark,
    .bg-info.text-dark { color: #212529 !important; }

    /* BREADCRUMB */

    .breadcrumb.border { border-color: #333 !important; }

    /* SHADOWS */

    .shadow { box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15) !important; }
    .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.075) !important; }
    .shadow-lg { box-shadow: 0 1rem 3rem rgba(255, 255, 255, 0.175) !important; }

    .cookie-consent { box-shadow: 0 -0.5rem 1rem rgba(255, 255, 255, 0.15) !important; }

    /* CARDS */

    .card { background-color: #000; border: 1px solid rgba(255, 255, 255, 0.125); }

    /* MODALS */

    .modal-content { background-color: #000; border: 1px solid rgba(255, 255, 255, 0.2); }
    .modal-header { border-bottom: 1px solid #212529; }
    .modal-footer { border-top: 1px solid #212529; }
    .modal-backdrop.show { opacity: 0.75; }

    /* ACCORDIONS */

    .accordion:not(.accordion-flush) { border-top: 1px solid #333; border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; }
    .accordion-button { color: #fff; background-color: #000; border: 1px solid #333; border-top: none; }
    .accordion-button:not(.collapsed) { color: #fff; background-color: #111; border-bottom: none; }
    .accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%); }
    .accordion-collapse { border: 1px solid #333; }
    .accordion-flush .accordion-button { border-right: 0; border-left: 0; border-radius: 0; }
    .accordion-flush .accordion-collapse { border-width: 0; }
    .accordion-flush .accordion-item:first-of-type .accordion-button { border-top-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
    .accordion-flush .accordion-item:last-of-type .accordion-button.collapsed { border-bottom-width: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }

    /* PROGRESS BARS */

    .progress { background-color: #333; }

    /* FORMS */

    .form-control::-webkit-input-placeholder,
    .form-control::-moz-placeholder,
    .form-control::placeholder { color: $light; }
    .form-control-plaintext { color: $light; }
    .form-control { color: #fff; background-color: #333; }
    .form-select { color: #fff; border-color: #111 !important; background: #333 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px; border: 1px solid #111; }
    .form-select:focus { border-color: #dc3545; box-shadow: 0 0 0 0.2rem #dc3545; background-color: rgba(255,0,0,0.1); }
    .form-select:focus::-ms-value { color: #495057; background-color: #fff; }
    .form-select option { color: #000; }
    .form-select:disabled { color: #6c757d; background-color: #e9ecef; }
    .form-select:-moz-focusring { text-shadow: 0 0 0 #495057; }

    /* CUSTOM */
    .separator {
        > .mask {
            &:after {
                box-shadow: 0 0 10px $light;
            }
        }
        > span {
            box-shadow:0 2px 4px $light;
            background: tint-color($light, 80%);
            color: $dark;
        }
    }

    .invertible {
        filter: invert(1);
    }

    mark {
        background-color: #856504;
        color: $light;
    }

    header {
        .nav-item {
            color: $light;
            &.active, &:hover {
                color: $primary-dark !important;
            }
        }
    }

    @include media-breakpoint-down('lg', $grid-breakpoints) {
        .nav-custom {
            .btn {
                &:hover, &:focus, &.active {
                    border-inline-start: 3px solid $primary-dark !important;
                }
            }
        }
    }

    .nav-custom-start {
        .btn {
            &:hover, &:focus, &.active {
                border-inline-start: 3px solid $primary-dark !important;
            }
        }
    }

    @include media-breakpoint-up('lg', $grid-breakpoints) {
        .nav-custom:not(.nav-custom-start) {
            .nav-item {
                &.btn {
                    &:hover, &:focus, &.active {
                        border-bottom: 3px solid $primary-dark !important;
                    }
                }
            }
        }
    }

    @include media-breakpoint-up('lg', $grid-breakpoints) {
        header {
            @supports not (backdrop-filter: blur(12px)) {
                background-color: $dark;
            }
        }
    }

    .alert-primary, .alert-success, .alert-warning, .alert-danger {
        a {
            color: $primary-dark;
        }
    }

    .alert-warning a.btn-primary {
        color: $white;
    }

    .alert-light {
        background-color: $gray-800;
        color: $white;
    }

    .badge.bg-dark {
        color: $black;
    }

    .vdp-datepicker__calendar {
        background-color: $dark;
    }

    .day-event-0 {
        color: $black;
    }

    .profile-current {
        border-inline-start: 3px solid $primary-dark !important;
    }

    .list-group-flare > :first-child {
        border-top: 3px solid $primary-dark !important;
    }

    code {
        color: color.adjust($code-color, $lightness: 45%, $space: hsl);
        background-color: color.adjust($code-color, $lightness: -30%, $space: hsl);
        border: 1px solid color.adjust($code-color, $lightness: 30%, $space: hsl);
    }

    &:not(.reduced-colours) {
        @each $name, $value in $colours {
            .colour-#{$name} {
                color: map.get($value, 'dark') !important;
            }
        }
    }

    .spoiler {
        background-color: $primary-bg-subtle-dark;
        color: $primary-bg-subtle-dark;
        &:hover {
            color: $white;
        }
    }

    input[type=checkbox].form-check-input:not(:checked):not([role=switch]) {
        background-color: $light;
    }
    input[type=radio].form-check-input:not(:checked):not([role=switch]) {
        background-color: $light;
    }
}