header {
    --bs-bg-opacity: 1;
    --header-bg-rgb: var(--bs-dark-rgb);
    background-color: rgba(var(--header-bg-rgb), var(--bs-bg-opacity));
}

[data-bs-theme="dark"] header {
    --header-bg-rgb: var(--bs-tertiary-bg-rgb);
}

.btn-outline-body {
    --bs-btn-color: #212529;
    --bs-btn-border-color: #212529;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #212529;
    --bs-btn-hover-border-color: #212529;
    --bs-btn-focus-shadow-rgb: 33, 37, 41;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #212529;
    --bs-btn-active-border-color: #212529;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #212529;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #212529;
    --bs-gradient: none;
}

[data-bs-theme="dark"] .btn-outline-body {
    --bs-btn-color: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #f8f9fa;
    --bs-btn-hover-border-color: #f8f9fa;
    --bs-btn-focus-shadow-rgb: 248, 249, 250;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #f8f9fa;
    --bs-btn-active-border-color: #f8f9fa;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #f8f9fa;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #f8f9fa;
    --bs-gradient: none;
}

#breadcrumb {
    --bs-breadcrumb-divider: ">";
}

#breadcrumb ol.breadcrumb {
    margin-bottom: 0;
}

#products-table {
    min-width: 500px;
}

.products-wall {
    &::-webkit-scrollbar {
        height: 4px;
    }
    &::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: var(--bs-gray-100);
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: var(--bs-gray-400);
    }
    &::-webkit-scrollbar-thumb:hover {
        background-color: var(--bs-gray-500);
    }
    &::-webkit-scrollbar-thumb:active {
        background-color: var(--bs-gray-600);
    }
}

[data-bs-theme="dark"] .products-wall {
    &::-webkit-scrollbar-track {
        background-color: var(--bs-gray-800);
    }
    &::-webkit-scrollbar-thumb {
        background-color: var(--bs-gray-600);
    }
    &::-webkit-scrollbar-thumb:hover {
        background-color: var(--bs-gray-500);
    }
    &::-webkit-scrollbar-thumb:active {
        background-color: var(--bs-gray-400);
    }
}

.card {
    --margin-size: 1rem;
    width: calc(50% - var(--margin-size));
}

/* sm */
@media (min-width: 576px) {
    .card {
        width: calc(33% - var(--margin-size));
    }
}

/* md */
@media (min-width: 768px) {
}

/* lg */
@media (min-width: 992px) {
    .products-wall {
        &::-webkit-scrollbar {
            height: 6px;
        }
    }

    .card {
        width: calc(25% - var(--margin-size));
    }

    #nav-search {
        width: 10rem;
    }
}

/* xl */
@media (min-width: 1200px) {
    .card {
        width: calc(20% - var(--margin-size));
    }

    #nav-search {
        width: auto;
    }
}

/* xxl */
@media (min-width: 1400px) {
}