/*------------------------------------------------------------------
[2 - Theme]
*/
html.dark-mode {
    body,
    .dropdown-item:hover,
    .blog-card .covered::before,
    .mask,
    .offcanvas-header,
    .offcanvas-body,
    .subscription-card-area,
    .affiliate-table-area,
    .affiliate-statistics-area,
    .navbar-nav .nav-link::after,
    .menu-box.active,
    .menu-box:hover {
        background: var(--dark-bg-color) !important;
    }

    .footer-inner .social a {
        background: var(--dark-bg-color);
    }

    nav.navbar,
    footer,
    .dropdown-menu,
    .switcher-form .slider,
    #cookies-policy,
    .modal-content,
    .subscription-form,
    .file-preview-inner,
    .affiliate-payments-area .payments-card {
        background: var(--dark-color) !important;
    }

    h1, h2:not(.notice-title), h3, h4, h5, h6,
    p:not(.upper-title):not(.section-heading-upper):not(.subscription-upper):not(.blog-category):not(.statistics-card-upper),
    .menu-title,
    .menu-subtitle,
    .custom-page ul,
    .blog-inner-card ul,
    .form-label,
    .form-check .form-check-label,
    .form-switch .form-check-label,
    .navbar-nav .nav-link,
    .dropdown-item,
    .dropdown-text *,
    .footer-link,
    .footer-text,
    .footer-icon,
    #cookies-policy .cookies-details a,
    article .share span,
    .comment-info span,
    .modal-content,
    .navbar-toggler,
    #side-menu li > a:not(.btn),
    .plan-card .plan-features li,
    .plan-card .plan-price span,
    .dropzone span {
        color: var(--dark-text-color) !important;
    }

    .blog-card .blog-title a,
    .upload-methods a {
        color: var(--dark-text-color);
    }

    .form-control,
    .form-select {
        background-color: var(--dark-color) !important;
        color: var(--dark-text-color) !important;
        border-color: var(--dark-border-1) !important;

        &::placeholder {
            color: var(--dark-text-color) !important;
            opacity: .75;
        }
    }

    .form-select {
        background-image: url("../image/chevron-light.svg") !important;
    }

    .form-check .form-check-input:not(:checked),
    .form-switch .form-check-input,
    .cookies-details .form-check-input:checked,
    .pagination .page-link {
        background-color: var(--dark-color) !important;
        border-color: var(--dark-border-1) !important;
    }

    input[type=file]::-webkit-file-upload-button {
        background: var(--dark-bg-color) !important;
        color: var(--dark-text-color) !important;
    }

    input[type=range]::-webkit-slider-runnable-track {
        background: var(--dark-bg-color) !important;
    }

    textarea {
        &::-webkit-scrollbar-corner {
            border-color: var(--dark-border-1);
            background-color: var(--dark-color);
        }
          
        &::-webkit-scrollbar {
            background-color: var(--dark-bg-color);
        }
          
        &::-webkit-scrollbar-thumb {
            background-color: var(--dark-color);
            border-radius: 1rem;
            border: 4px solid transparent;
            background-clip: padding-box;
        }
    }

    .input-icon > i {
        color: rgba(var(--color-1-rgb),.75);
    }

    .scroll-light::-webkit-scrollbar {
        &-track {
            background: var(--dark-bg-color) !important;
        }

        &-thumb {
            background: var(--dark-border-2) !important;
        }
    }

    .os-theme-dark {
        --os-handle-bg: var(--dark-border-2) !important;
        --os-handle-bg-hover: var(--dark-bg-color) !important;
        --os-handle-bg-active: var(--dark-bg-color) !important;
    }

    .go-to-top-progress {
        background-color: var(--dark-color);
        color: var(--dark-text-color);
    }

    .alert-1 {
        color: var(--dark-text-color);
        background: var(--color-6);
    }
    
    .alert-2 {
        color: var(--dark-text-color);
        background: var(--color-7);
    }

    .alert-3 {
        color: var(--dark-text-color);
        background: var(--color-1);
    }

    .switcher {
        .slider {
            outline: 1px solid var(--dark-border-1);

            i:first-child {
                color: var(--dark-bg-color);
            }
        }

        input {
            &:checked +.slider {
                background-color: var(--dark-color);

                &:before {
                    background-color: var(--dark-bg-color);
                }
    
                i:last-child {
                    color: var(--dark-text-color);
                }
            }
        }
    }

    .btn-color-1:hover {
        background: var(--dark-bg-color) !important;
        border-color: var(--dark-bg-color) !important;
    }

    .btn-header,
    .btn-color-3,
    .btn-color-4,
    .home-header-area .btn-action {
        color: var(--dark-text-color) !important;
        background: var(--dark-bg-color) !important;
        border-color: var(--dark-bg-color) !important;
    }
    
    .file-area .btn-action {
        color: var(--dark-text-color) !important;
        background: var(--dark-color) !important;
        border-color: var(--dark-color) !important;
    }

    .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    @media (min-width: $breakpoint-small) {
        .advanced-options {
            .btn {
                background: var(--dark-color);
                color: var(--dark-text-color);
                border-color: var(--dark-border-1);
            }
        }
    }

    .card {
        background: var(--dark-color) !important;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    }

    .user-menu-alert {
        color: var(--dark-text-color);
        background: var(--dark-color);
        border: 1px solid var(--dark-border-1);
    }

    .menu-box {
        .menu-icon {
            background: var(--dark-color);
        }

        &:hover .menu-icon {
            background: var(--dark-bg-color);
        }
    }

    .auth-page {
        .social-auth .btn {
            color: var(--dark-text-color);
            border-color: var(--dark-border-1);
        }

        .auth-or {
            color: var(--dark-border-1);

            > div {
                color: var(--dark-text-color);
            }
        }
    }

    .footer-inner .footer-bottom,
    #cookies-policy .cookies-details,
    .share,
    .blog-inner-page .comment-list .d-flex:not(:nth-of-type(1)),
    .link-area,
    .file-area .file-preview,
    .file-area .image-input .btn,
    .file-area .image-input input:focus,
    .affiliate-table-area .btn:hover {
        border-color: var(--dark-border-1) !important;
    }

    .subscription-card-area {
        border-top: 1px solid var(--dark-border-1);
    }

    .contact-form-area .covered {
        border-color: var(--dark-color);
    }

    .accordion-item {
        background: var(--dark-bg-color) !important;
        border-color: var(--dark-border-1) !important;

        .accordion-button,
        .accordion-collapse {
            background: var(--dark-bg-color) !important;
            color: var(--dark-text-color) !important;
        }

        .accordion-body {
            color: var(--dark-text-color) !important;
        }
    }

    .auth-page .auth-bottom a,
    .subscription-card-heading p:first-child {
        color: var(--color-1) !important;
    }

    .blog-inner-page {
        .new-comment {
            background: var(--dark-color);
            border-radius: 2rem;
            padding: 2rem;
        }

        article {
            .post-badge {
                color: var(--dark-text-color);
    
                i {
                    color: var(--color-1);
                }
            }
    
            .share a {
                color: var(--dark-text-color);
            }
        }
    }

    .pay-page {
        .payment-terms,
        .payment-method {
            background: var(--dark-color);
            border: 1px solid var(--dark-border-1);
        }
    }

    .home-slider .swiper-slide {
        background-color: var(--dark-color);
    }

    .dropzone,
    table {
        ::-webkit-scrollbar {
            &-track {
                background: var(--dark-bg-color) !important;
            }

            &-thumb {
                background: var(--dark-border-2) !important;
            }
        }
    }

    .dropzone {
        background: var(--dark-color);
        border: 2px dashed var(--dark-border-1) !important;

        .fa-cloud-arrow-up {
            color: var(--dark-bg-color);
        }
    }

    .affiliate-table-area {
        table {
            --bs-table-bg: var(--dark-color) !important;
            border-color: var(--dark-border-1);

            tr,
            th {
                border-color: var(--dark-border-1);
            }

            th, 
            td {
                color: var(--dark-text-color);
            }
        }
    }

    .popover {
        &-arrow::after {
            border-bottom-color: var(--dark-bg-color) !important;
        }
        
        &-body {
            background: var(--dark-bg-color) !important;
            color: var(--dark-text-color) !important;
        }
    }
}
