frontend/src/layouts/AppLayout/index.module.scss
@use '@cloudscape-design/design-tokens/index' as awsui;

:global {
    .b-page-header {
        .awsui-context-top-navigation {
            border-bottom: 1px solid awsui.$color-border-divider-default;

            [class*="awsui_utility-type-button"] {
                [class*="awsui_link"][href="theme-button"] {
                    [class^="awsui_icon"] {
                        width: 48px !important;
                    }
                }
            }
        }
    }
}

[class^='awsui_navigation'] {
    [class^='awsui_list-container'] {
        a[href='#version'] {
            pointer-events: none;
            color: awsui.$color-text-status-inactive !important;
        }
    }
}

.appHeader {
    height: 48px;
    @media (screen and min-width: 913px) {
        height: 56px;
    }
    .userAvatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
    }
    [data-class="user-menu"] {
        [class^="awsui_dropdown-trigger"] {
            [class^="awsui_text"] {
                margin-right: 0!important;
            }
            [class*="awsui_icon"] {
                display: none !important;
            }
        }
    }
    & > * {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
}

.themeIcon {
    display: flex;
    align-items: center;
    width: 48px;
    gap: 6px;

    .switcher {
        position: relative;
        flex-shrink: 0;
        width: 24px;
        height: 16px;
        border-radius: 8px;
        background-color: awsui.$color-background-layout-toggle-default;
        transition: background-color .2s ease;

        &::before {
            content: "";
            position: absolute;
            top: 2px;
            left: 0;
            transform: translateX(2px);
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: awsui.$color-foreground-control-default;
            transition: transform .2s ease;
        }

        &.on {
            background-color: awsui.$color-background-control-checked;
            &::before {
                transform: translateX(10px);
            }
        }
    }

    .icon {
        flex-shrink: 0;
    }
}

.dstackVersion {
    z-index: 9999;
    position: absolute;
    bottom: 6px;
    left: 28px;
}
