@layer typedoc {
    :root {
        /* Layout */
        --dim-toolbar-contents-height: 52px;
        --dim-toolbar-border-bottom-width: 1px;
        --dim-header-height: calc(var(--dim-toolbar-border-bottom-width) + var(--dim-toolbar-contents-height));
        --dim-container-main-margin-y: 0rem;
        --dim-footer-height: 3.5rem;
        --modal-animation-duration: 0.2s;

        /* Logitech Colors */
        --dark-green: #0D3A38;
        --light-green: #E6FFFB;
        --white: #FFFFFF;
        --black: #1B1B1B;
        --light-gray: #EEEEEE;
    }

    /* Page Background */
    body {
        background-color: var(--white) !important;
    }

    /* Toolbar */
    .tsd-page-toolbar {
        background-color: var(--dark-green) !important;
        color: var(--white);
    }

    .tsd-page-toolbar a {
        color: var(--white);
    }

    .tsd-toolbar-contents {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .tsd-back-link,
    .tsd-page-toolbar .title {
        background-color: transparent !important;
        color: var(--white) !important;
        padding: 0.25rem 0.75rem;
        border-radius: 0.25rem;
        font-size: 15px;
        font-weight: 500;
        text-decoration: none !important;
        transition: background-color 0.2s;
        height: 42px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }

    .tsd-back-link:hover,
    .tsd-page-toolbar .title:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    /* Search */
    #tsd-search a:hover {
        text-decoration: none;
    }

    #tsd-search-trigger svg {
        --color-icon-text: var(--white);
    }

    /* Code styling */
    pre,
    code,
    .tsd-signature {
        background-color: var(--light-green) !important;
        color: var(--black) !important;
    }

    /* Navigation */
    .tsd-navigation a.current,
    .tsd-navigation a:hover,
    .tsd-navigation a.current span,
    .tsd-navigation a:hover span,
    .tsd-page-navigation a:hover span {
        background-color: transparent;
        color: var(--dark-green);
        font-weight: bold;
    }

    .tsd-navigation a:hover,
    .tsd-page-navigation a:hover {
        text-decoration: none;
    }

    /* Hide theme toggle */
    .tsd-theme-toggle {
        display: none !important;
    }

    /* Hide footer */
    footer {
        display: none !important;
    }
}