@use '~/styles/var';

.SiteLayout {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;

    .side {
        height: 100%;
        flex: 0 0 300px;
        overflow-y: auto;
        background: #eef3fa;

        :global(html.dark) & {
            background: #1e1f22;
        }

        @media (max-width: var.$BREAKPOINT_TABLET) {
            padding-bottom: 80px;
            z-index: 1002;
            position: fixed;
            width: 100%;
            pointer-events: none;
            transform: translate(-100%, 0);

            &.open {
                pointer-events: all;
                transform: translate(0, 0);
            }
        }
    }

    .menu {
        z-index: 1003;
        position: fixed;
        bottom: 16px;
        left: 16px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
        background: #eef3fa;

        :global(html.dark) & {
            background: #1e1f22;
        }
    }

    .top {
        position: sticky;
        top: 0;
        z-index: 1001;
        background: #eef3fa;

        :global(html.dark) & {
            background: #1e1f22;
        }
    }

    .top-content {
        display: flex;
        align-items: center;
        height: 56px;
        white-space: nowrap;
        overflow-x: auto;
    }

    .center {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        overflow: auto;
    }

    .content {
        flex: 1;
        padding: 16px;
        background: #fff;
        border-radius: 24px 0 0 0;

        :global(html.dark) & {
            background: #232428;
        }

        @media (max-width: var.$BREAKPOINT_TABLET) {
            padding-bottom: 80px;
        }
    }
}
