@admin-header-background: @color-f;
@admin-header-padding: 15px;

html {
    height: auto;
}

body {
    background: @bg-web;
}

.web {
    margin: 0 auto;
    width: 100%;

    &__header {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        height: @height-header;
        z-index: 1100;

        &--small {
            height: @height-header;
        }

        .web--with-info & {
            padding-top: @height-fixed-bar-mobile;

            @media @query-md {
                padding-top: @height-fixed-bar;
            }
        }

        .dump-mode & {
            position: relative;
        }

        &__in {
            position: relative;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin: 0 auto;
            width: 100%;
            height: @height-header;

            border-bottom-right-radius: @radius;
            background: @admin-header-background;
            box-shadow: 0 0 2px 0 rgba(0,0,0,0.5);
            color: @color-f;

            &--small {
                justify-content: start;
            }
        }

        &__menu {
            display: block;
            margin-left: 6px;

            @media @query-lg {
                display: none;
            }
        }

        &__logo {
            padding-left: @admin-header-padding;
            width: 130px;

            @media @query-lg {
                width: @width-panel;
            }

            &__svg {
                width: auto;
                height: 42px;
            }
        }
    }

    &__container {
        position: relative;
        padding-top: @height-header;
        padding-bottom: @height-fixed-bar;
        min-height: 100vh;
        width: @width-web;
        margin: 0 auto;

        background: @bg-page;

        .dump-mode & {
            padding-top: 0;
        }

        .web--with-info & {
            padding-top: @height-header + @height-fixed-bar-mobile;

            @media @query-md {
                padding-top: @height-header + @height-fixed-bar;
            }
        }

        &--blank {
            padding-left: 0;

            &:after {
                display: none;
            }
        }
    }

    &__panel {
        display: block;
        position: fixed;
        width: @width-panel-small;
        top: @height-header;
        left: -@width-panel-small;
        bottom: 0;
        padding-bottom: @height-fixed-bar;
        z-index: 1000;

        background-color: @color-f;
        transition: left 200ms;

        .active-menu & {
            left: 0;

            transition: left 200ms;
        }

        @media @query-lg {
            width: @width-panel;
            left: 0;

            .menu-collapsed & {
                width: @width-panel-small;
            }
        }

        &.open {
            width: @width-panel;
        }

        .dump-mode & {
            position: absolute;
            top: 0;
        }

        .web--with-info & {
            top: @height-header + @height-fixed-bar-mobile;

            @media @query-md {
                top: @height-header + @height-fixed-bar;
            }
        }

        &__in {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow-x: hidden;
            overflow-y: auto;

            &::-webkit-scrollbar {
                -webkit-appearance: none;
            }
            &::-webkit-scrollbar:vertical {
                width: 11px;
            }
            &::-webkit-scrollbar-thumb {
                background-color: rgba(0, 0, 0, 0.5);
                border: 2px solid white;
                border-radius: 8px;
            }

            &::-webkit-scrollbar-track {
                background-color: @color-f;
                border-radius: 8px;
            }
        }
    }

    &__content {
        position: relative;
        margin: 0 auto;
        padding-top: calc(~"@{content-gap} - @{wrap-border-gap}");
        padding-bottom: @content-gap;
        padding-right: @content-gap/2;
        padding-left: @content-gap/2;
        max-width: @width-content;

        @media @query-lg {
            padding-left: @width-panel + @content-gap;
            padding-right: @content-gap;
        }

        .menu-collapsed & {
            padding-left: @width-panel-small + @content-gap;
        }

        .web__container--blank & {
            padding-left: 0;
            padding-right: 0;
        }

        &--padding-top {
            padding-top: 20px;
        }

        &__overlay {
            display: none;

            .active-menu & {
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;

                background-color: rgba(0,0,0,0.5);
            }
        }
    }
}