@import "@styles/vars.less";

html {
    &.mobile {
        &.page-panel-spacer {
            .pagePanels {
                &.withTopPadding {
                    .panel {
                        &.center {
                            padding-top: calc(@top_bar_height + @top_bar_padding * 2);
                        }
                    }
                }
            }
        }

        .pagePanels {
            display: flex;
            flex-direction: column;

            align-items: center;
            justify-content: flex-start;

            width: 100%;
            //height: max-content;

            padding: 0;

            &.masked {
                -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 97%, transparent 100%);
                mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 97%, transparent 100%);
            }

            .panel {
                width: 100%;

                height: unset;

                &.center {
                    z-index: 300;

                    overflow: unset;
                    overflow-x: unset;
                    overflow-y: unset;

                    height: unset;

                    transition: all 150ms ease-in-out;
                }
            }
        }
    }
}

.pagePanels {
    display: flex;
    flex-direction: column;

    width: 100%;

    .post_card {
        max-width: unset;
    }

    .panel {
        position: sticky;
        top: 0;

        height: fit-content;

        display: flex;
        flex-direction: column;

        align-items: center;

        gap: 20px;

        &.full {
            height: 100%;
        }

        &.left {
            .card {
                background-color: var(--background-color-accent);

                .ant-menu {
                    .ant-menu-item-selected {
                        background-color: var(--background-color-primary) !important;
                    }

                    .ant-menu-item-disabled {
                        .ant-menu-title-content {
                            svg {
                                color: var(--disabled-color) !important;
                            }

                            color: var(--disabled-color) !important;
                        }
                    }
                }
            }
        }
    }
}