@use 'sass:color';
@use 'settings' as *;
@use 'images' as *;
@use 'mixins' as *;

html[data-bs-theme="dark"] {
    body {
        color: #f7f7f7;
        background-color: #262626;
    }
    a {
        color: $color_1;
        &:visited {
            color: $color_1;
        }
        &:hover,
        &:focus {
            color: $color_2;
        }
    }
    .color6,
    .color5 {
        color: $color_2 !important;
    }
    .navbar-light {
        background-color: $dark_4 !important;
        border-top-color: $color_6 !important;
    }
    .navbar-light .navbar-collapse .navbar-nav>li>a {
        color: $color_1;
    }
    .navbar-light .navbar-collapse .navbar-nav>li.active>a,
    .navbar-light .navbar-collapse .navbar-nav>li>a:hover,
    .navbar-light .navbar-collapse .navbar-nav>li>a:focus,
    .navbar-light .navbar-collapse .navbar-nav>li>a:active {
        color: #fff;
    }
    .navbar-light .navbar-collapse .navbar-nav>li.dropdown .dropdown-menu>li>a {
        color: #ccc;
    }
    .navbar-light .navbar-collapse .navbar-nav>li.dropdown .dropdown-menu>li>a:hover,
    .navbar-light .navbar-collapse .navbar-nav>li.dropdown .dropdown-menu>li>a:focus {
        color: #fff;
    }
    .navbar-light .navbar-collapse .navbar-nav > li.dropdown .dropdown-menu > li > a,
    .navbar-light .navbar-collapse .navbar-nav > li.dropdown .dropdown-menu > li .list-group-item-action,
    .navbar-light .navbar-collapse .navbar-nav > li.dropdown .dropdown-menu .list-group > a,
    .navbar-light .navbar-collapse .navbar-nav > li.dropdown .dropdown-menu .list-group .list-group-item-action {
        color: $color_1;
    }
    //Home Icons
    .home-icons h4,
    .home-icons i,
    .facts-title {
        color: $color_2 !important;
    }
    .home-icons:hover i, .home-icons:hover i {
        color: #f5f5f5 !important;
    }
    .home-icons h5,
    #counterUp .color4 {
        color: #aaa !important;
    }
    .crypto .badge {
        color: $color_1;
        background-color: $dark_3;
    }
    .crypto .coin-day {
        color: #f7f7f7;
    }
    //Sections
    .bg-buy {
        background: url($parallaxImgBgDark) rgba($dark_3, 0.06);
        .intro-text {
            color: $color_2;
        }
    }
    .bg-white {
        background-color: $dark_1 !important;
        color: #f7f7f7 !important;
    }
    .bg-gray {
        background-color: $dark_2 !important;
        color: #f7f7f7 !important;
    }
    //Breadcrumb
    .breadcrumb-container {
        background-color: $dark_3 !important;
        i {
            color: $color_2;
        }
    }
    //Tables
    .table-theme-1 td,
    .table-theme-2 td {
        color: #f7f7f7 !important;
    }
    //Titles
    .title h2,
    .title h3 {
        color: #fff;
        &::after {
            background: rgba(204, 204, 204, 0.1);
        }
    }
    .title-r h2,
    .title-r h3 {
        color: #fff;
        &::after {
            background: rgba(204, 204, 204, 0.1);
        }
    }
    //Tabs
    .nav-tabs {
        border-bottom-color: $color_6;
    }
    .nav-tabs .nav-link {
        color: $color_1;
        background-color: $dark_3 !important;
        border-bottom-color: $color_6;
    }
    .nav-tabs .nav-link.active {
        background-color: $body_bg_color !important;
        border-color: $color_6 !important;
        cursor: default;
        color: $color_4 !important;
        @include box-shadow(none);
    }
    .nav-wizard.nav-justified > li > a {
        background-color: $dark_3;
        &.active {
            color: #ffffff;
            background-color: $color_3 !important;
            &:hover, &:focus {
                color: #ffffff;
                background-color: $color_3 !important;
            }
            &:after {
                border-left-color: $color_3 !important;
            }
            .badge {
                color: $color_3;
                background-color: #ffffff;
            }
        }
    }
    .nav-wizard > li:not(:last-child) > a {
        &:after {
            border-left: 20px solid $dark_3;
        }
        &.active {
            &:after {
                border-left-color: $color_3;
            }
        }
    }
    //Accordion
    .accordion-header,
    .panel-heading {
        background-color: $dark_3 !important;
        a,
        button {
            color: $color_1 !important;
        }
    }
    .panel-group .panel-heading a:after,
    .accordion .accordion-item .accordion-header .btn:after,
    .accordion .accordion-item .accordion-header .submit:after {
        color: $color_2 !important;
    }
    //Footer
    .footer-top {
        background-color: color.adjust($dark_3, $lightness: -2.5%) !important;
    }
    .footer-bottom {
        background-color: $dark_4 !important;
        border-top-color: $dark_4 !important;
    }
    //Forms
    .form-control,
    .selectcorp,
    textarea {
        background-color: $dark_3 !important;
        color: #f5f5f5;
    }
    .cbselect-wrapper * {
        color: #f5f5f5 !important;
        .dropdown-item {
            color: #f5f5f5 !important;
            &:hover,
            &:focus {
                color: #fff !important;
            }
        }
    }
    .alert-dismissible>.btn-close {
        filter: none;
    }
    //Inputs forms
    .newsletter,
    .search-form {
        .form-control {
            border: solid 1px $dark_3;
            background-color: $dark_3;

            &:hover,
            &:focus {
                border-color: #fff;
            }
        }
    }
    .cbselect-wrapper>.open {
        border: solid 1px #bdc3c7;
        background-color: $dark_3;
    }
    //Paginations
    .pagination .page-item .page-link {
        background-color: $dark_2;
        color: #bbb;
        &:hover,
        &:focus {
            background-color: $color_3;
            color: #fff;
            @include box-shadow(none);
        }
    }
    .pagination .page-item.active a {
        background-color: $color_3;
        color: #fff;
        @include box-shadow(none);
    }
    //Blogs
    .author-bio,
    .comment {
        background-color: $dark_3;
        border: solid 1px $dark_1;
    }
    ul.children {
        background-color: $dark_3;
    }
    .author {
        color: $color_1;
    }
    .swiper-pagination span:before,
    .swiper-pagination-bullets.swiper-pagination-horizontal span:before {
        color: #f5f5f5;
    }
    //Calendar table
    #wp-calendar {
        border-top: 1px solid $dark_2;
        tfoot {
            background: $dark_3;
            border: 1px solid $dark_4;
        }
        tbody {
            td {
                border: 1px solid $dark_4;
                &:hover {
                    background: $dark_2;
                    color: $color_1;
                    a {
                        background: #a3a3a3;
                        color: $dark_1;
                    }
                }
                a {
                    background: #363636;
                    color: $color_1;
                }
            }
        }
        caption {
            background: $dark_4;
            border: solid 1px $dark_2;
        }
        th {
            color: #a3a3a3;
        }
        thead th {
            background: $dark_3;
            border: 1px solid $dark_4;
        }
    }
    //blogs cards
    .corp-pricing {
        background-color: $dark_2;
        border: 1px solid $dark_4;
        ul li {
            border-top: 1px solid $dark_4;
        }
    }
    .widget ul li {
        border-bottom: solid 1px $dark_4;
        a {
            color: #f2f2f2 !important;
        }
    }
    .widget>ul>li>a>span.badge {
        background: $dark_3;
        border: solid 1px $dark_3;
    }
    .widget>ul>li>a:hover>span.badge {
        background: $color_1;
        border: solid 1px $color_1;
    }
    .tags-links a,
    .tagcloud a {
        border: 1px solid #aaa;
        color: #f2f2f2;
        &:hover,
        &:focus {
            color: #fff !important;
            border-color: $color_3;
        }
    }
    //Portfolio
    .portfolio-filters li {
        background-color: rgba($color_4, 0.06);
        color: $color_2;
        &:hover,
        &:focus {
            background-color: $color_3;
            color: #fff;
        }
        &.active {
            background-color: $color_4;
            color: #fff;
            &:hover,
            &:focus {
                background-color: $color_3;
                color: #fff;
            }
        }
    }
    .bg-portfolio-single {
        background-color: $dark_1 !important;
        color: #f7f7f7 !important;
    }
    //Skills
    .skills>h5 {
        color: $color_2;
    }
    //Services
    .servdesc>h3 {
        color: $color_2;
    }
    //Login
    .line {
        color: rgba(255, 255, 255, 0.5);
        &:before {
            background-color: $dark_2;
        }
        &:after {
            background-color: #aaa;
        }
    }
    //Teams
    .team-name h4 {
        color: $color_2;
    }
    .item-img-overlay .team-social {
        background: rgba(2, 2, 2, 0.8);
        color: rgba($body_bg_color, 0.8);
    }
    .socialstaff li {
        a {
            .fa-facebook-square {
                color: $color_1;
                &:hover,
                &:focus {
                    color: $color_facebook;
                }
            }
            .fa-square-x-twitter {
                color: $color_1;
                &:hover,
                &:focus {
                    color: #AAB8C2;
                }
            }
            .fa-google-plus-square {
                color: $color_1;
                &:hover,
                &:focus {
                    color: $color_google;
                }
            }
            i.fa-instagram {
                color: $color_1;
                &:hover,
                &:focus {
                    color: $color_instagram;
                }
            }
            i.fa-square-instagram {
                color: $color_1;
                &:hover,
                &:focus {
                    color: $color_instagram;
                }
            }
            .fa-pinterest-square {
                color: $color_1;
                &:hover,
                &:focus {
                    color: $color_pinterest;
                }
            }
            .fa-flickr-square {
                color: $color_1;
                &:hover,
                &:focus {
                    color: $color_flickr;
                }
            }
            i.fa-linkedin {
                color: $color_1;
                &:hover,
                &:focus {
                    color: $color_linkedin;
                }
            }
            i.fa-envelope {
                color: color.adjust($color_3, $lightness: 5%);
                &:hover,
                &:focus {
                    color: $color_1;
                }
            }
        }
    }
    //Dashboard
    #sidebar-wrapper,
    #sidebar-wrapper .bg-light {
        background-color: $dark_4 !important;
        .list-group-item-light {
            background-color: $dark_4;
        }
    }
}
