.frame {
    h1.glossary-header {
        margin: 0 auto 3rem auto;
    }
}

.glossary {

    .nav-tabs {
        --bs-nav-tabs-border-width: 0;
        --bs-nav-tabs-border-color: var(--bs-border-color);
        --bs-nav-tabs-border-radius: 0;
        --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
        --bs-nav-tabs-link-active-color: var(--dark-gray);
        --bs-nav-tabs-link-active-bg: transparent;
        --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
        border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
    }

    .nav {
        --bs-nav-link-padding-x: 0;
        --bs-nav-link-padding-y: 0;
        --bs-nav-link-color: var(--medium-gray);
        --bs-nav-link-hover-color: var(--dark-gray);
        --bs-nav-link-disabled-color: var(--light-gray);
    }

    .glossary__main-tabs {
        gap: 1rem;
        flex-wrap: nowrap;
        scrollbar-width: none;
        overflow-x: scroll;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid var(--light-gray);
        margin-bottom: 3rem;

        &::-webkit-scrollbar {
            display: none;
        }

        .nav-item {
            min-width: fit-content;
        }

        .nav-link {
            &.active {
                border-bottom: 2px solid var(--dark-gray);
            }
        }
    }

    .glossary__main-content-container {
        gap: 1.5rem;

        .dropdown,
        .dropdown-toggle,
        .dropdown-menu {
            width: 100%;
        }

        .dropdown {
            background-color: var(--main-gray);
            color: var(--medium-gray);
            margin-bottom: 1.5rem;
            border-bottom: 1px solid var(--light-gray);

            a,
            a:hover {
                color: var(--medium-gray);
                padding: 0.75rem;
                text-align: left;
                --bs-btn-border-width: 0;
            }

            a::after {
                display: none;
            }

            &:has(a[aria-expanded="true"]) {
                .dropdown-toggle {
                    svg {
                        transform: rotate(0deg);
                    }
                }
            }

            .dropdown-toggle {
                svg {
                    top: 1px;
                    width: 16px;
                    fill: var(--dark-gray);
                    transform: rotate(180deg);
                    transition: transform .3s ease;
                }
            }

            .dropdown-menu {
                --bs-dropdown-zindex: 1000;
                --bs-dropdown-min-width: 100%;
                --bs-dropdown-padding-x: 0.75rem;
                --bs-dropdown-padding-y: 0.75rem;
                --bs-dropdown-spacer: 0.125rem;
                --bs-dropdown-font-size: var(--font-size-small);
                --bs-dropdown-color: var(--medium-gray);
                --bs-dropdown-bg: #fff;
                --bs-dropdown-border-color: var(--light-gray);
                --bs-dropdown-border-radius: 0;
                box-shadow: 0px 6px 10px 1px rgba(0, 0, 0, 0.15);
                border-top: unset;
                inset: -1px auto auto 0px !important;

                li {
                    padding: 0.75rem;

                    .nav-link.active {
                        font-weight: 700;
                    }
                }
            }
        }
    }

    .glossary__main-content-tabs {
        min-width: 210px;
        flex-grow: 1;

        .nav-item {
            width: 100%;
            border-bottom: 1px solid var(--light-gray);

            .nav-link {
                width: 100%;
                padding: 0.75rem 0;

                &:hover,
                &.active {
                    svg {
                        opacity: 1;
                    }
                }

                &.active {
                    color: var(--dark-gray);
                    font-weight: 700;
                }

                svg {
                    width: 7px;
                    opacity: 0;
                    transition: opacity .3s ease;
                }
            }
        }
    }

    @media screen and (min-width: 768px) {
        .glossary__main-tabs {
            margin-bottom: 4rem;
        }
    }

    @media screen and (min-width: 992px) {
        .glossary__main-tabs {
            gap: 1.5rem;
        }

        .glossary__main-content-container {
            gap: 2rem;
        }
    }

    @media screen and (min-width: 1200px) {
        .glossary__main-content-container {
            .glossary__main-content-tabs {
                min-width: 340px;
            }
        }
    }

    @media screen and (min-width: 1400px) {
        .glossary__main-content-container {
            gap: 3rem;

            .glossary__main-content-tabs {
                min-width: 365px;
            }
        }
    }
}

@media screen and (min-width: 1200px) {
    .container:has(.glossary) {
        max-width: 1088px;
    }
}

@media screen and (min-width: 1792px) {
    .container:has(.glossary) {
        max-width: 1326px;
    }
}