:host {
    display: block;
    width: 100%;
    height: 100%;
}

    :host * {
        box-sizing: border-box;
    }

.demo-container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

    .demo-container igc-chip {
        --ig-chip-hover-background: var(--ig-gray-300);
        --ig-chip-focus-background: var(--ig-gray-300);
    }

.router-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    flex: 1;
}

.igb-web-theme-provider {
    width: 100%;
    display: flex;
}

.tab-container {
    width: 100%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--ig-surface-500);
    box-sizing: border-box;
}

    .tab-container a {
        text-decoration: none;
        display: block;
        width: 100%;
        height: 100%;
    }

.tab-item-container {
    width: 100%;
    height: 72px;
    display: inline-flex;
}

.tab-item {
    align-items: center;
    height: 100%;
    display: flex;
    flex-grow: 1;
    flex-basis: 0;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    cursor: pointer;
    user-select: none;
    /* WC renders the unselected tabs in (near-)black; gray-900 is the darkest theme token. */
    color: var(--ig-gray-900);
    box-sizing: border-box;
}

.tab-item--selected {
    border-bottom: 3px solid var(--ig-primary-500);
    color: var(--ig-primary-500) !important;
}

.tab-item:hover {
    background-color: var(--ig-gray-200);
}

.tab-header {
    display: flex;
    flex-direction: row;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.15px;
    --ig-size: var(--ig-size-medium);
}

.tabs-info-wrapper-element {
    width: 100%;
}

.current-tab-info {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
    height: 90px;
    padding: 20px 24px;
    border: 1px solid var(--ig-gray-300);
}

    .current-tab-info .sample-info {
        height: 58px;
        display: flex;
        flex-direction: column;
        row-gap: 8px;
    }

    .current-tab-info .tab-description {
        font-weight: 300;
        font-size: 12px;
        line-height: 100%;
        letter-spacing: 0%;
    }

    .current-tab-info .sample-actions {
        display: flex;
        gap: 16px;
        align-items: center;
        line-height: 100%;
        font-size: 14px;
    }

        .current-tab-info .sample-actions .theme-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-weight: 600;
            letter-spacing: 0.15px;
            height: 40px;
            padding-right: 16px;
            border-right: 1px solid var(--ig-gray-300);
        }

        .current-tab-info .sample-actions .action-buttons {
            display: flex;
            justify-content: space-between;
            gap: 16px;
        }

            .current-tab-info .sample-actions .action-buttons .action-btn {
                display: inline-flex;
                cursor: pointer;
            }

            .current-tab-info .sample-actions .action-buttons .btn-icon {
                --ig-icon-size: 18px;
                width: 18px;
                height: 18px;
                margin-right: 4px;
                color: var(--ig-gray-800);
            }

            .current-tab-info .sample-actions .action-buttons .btn-icon::part(icon) {
                color: var(--ig-gray-800);
            }

            .current-tab-info .sample-actions .action-buttons .custom-button::part(base) {
                color: var(--ig-gray-800);
                border-color: var(--ig-gray-300);
                text-transform: unset;
            }

                .current-tab-info .sample-actions .action-buttons .custom-button::part(base) igc-icon::part(icon) {
                    color: var(--ig-gray-800);
                }

:fullscreen,
:-webkit-full-screen,
:host(:fullscreen),
:host(:-webkit-full-screen),
:host([data-browser-fullscreen]) {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ig-surface-500);
}

    :host(:fullscreen) .demo-container,
    :host(:-webkit-full-screen) .demo-container,
    :host([data-browser-fullscreen]) .demo-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    :host(:fullscreen) .router-container,
    :host(:-webkit-full-screen) .router-container,
    :host([data-browser-fullscreen]) .router-container {
        flex: 1;
        display: flex;
        overflow: auto;
    }

html {
    height: 100%;
    box-sizing: border-box;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    min-width: 1100px;
    /* The dashboard fills exactly the viewport; the grids scroll internally, so the page
       itself must never produce its own vertical/horizontal scrollbar. */
    overflow: hidden;
    background-color: var(--ig-surface-500);
    color: var(--ig-gray-900);
    /* Apply the Ignite typography font globally (shell + anything outside a scoped section),
       otherwise the page falls back to the browser serif default. */
    font-family: var(--ig-font-family, "Titillium Web", sans-serif);
}

.sample-container {
    width: 100%;
    height: 100%;
}