@use 'admiral/assets/scss-variables' as *;
@use 'admiral/assets/mixins' as *;

.wrap {
    --layout-header-height: 70px;
    --layout-aside-width: 236px;

    display: flex;
    flex-direction: column;
    height: 100vh;
    min-width: 320px;

    &__Collapsed {
        --layout-aside-width: 90px;
    }
}

.content {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    padding-left: calc(var(--layout-aside-width));
    background: var(--color-bg-secondary);

    @include maxWidth($bp-tablet - 1) {
        padding-left: 0;
        padding-top: calc(var(--layout-header-height));
    }
}

.panel {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: max-content minmax(0, 1fr) max-content;
    width: var(--layout-aside-width);
    height: 100%;
    background: var(--color-bg-default);
    color: var(--color-typo-primary);
    box-shadow: var(--shadow-layer);
    transition: width 0.2s;

    @include maxWidth($bp-tablet - 1) {
        width: 100%;
        height: auto;
    }
}

.panel_Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    width: 100%;
    height: var(--layout-header-height);
    padding: var(--space-s) var(--space-2xl) var(--space-s) var(--space-m);
    border-bottom: 1px solid var(--color-bg-border);

    @include minWidth($bp-tablet) {
        &__Collapsed {
            padding: var(--space-s) var(--space-m);
            justify-content: center;

            .logo {
                width: 0;
                height: 0;
                overflow: hidden;
            }

            .collapseToggle {
                width: 100%;
                margin-right: 0;
            }
        }
    }
}

.panel_Content {
    height: 100%;
    padding: var(--space-xs) 0;
    overflow-y: auto;

    @include maxWidth($bp-tablet - 1) {
        display: none;
    }
}

.panel_Footer {
    padding: var(--space-m) var(--space-xl);
    border-top: 1px solid var(--color-bg-border);

    @include maxWidth($bp-tablet - 1) {
        display: none;
    }
}

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 100%;
    width: 100%;
    max-width: 95px;
    transition: opacity 0.2s, width 0.2s, height 0.2s;

    img,
    svg {
        max-height: 100%;
        width: 100%;
    }

    &:hover {
        opacity: 0.9;
    }

    &__Active {
        cursor: default;
        pointer-events: none;
    }
}

.collapseToggle {
    $this: &;
    width: 40px;
    height: 100%;
    color: var(--color-control-typo-clear);
    transform: translate3d(10px, 0, 0);
    transition: transform 0.2s;

    @include noTouchHover() {
        color: var(--color-control-typo-clear-hover);
    }

    svg {
        width: 18px;
        height: auto;
    }

    &__Desktop {
        &#{$this}__Collapsed {
            transform: translate3d(0, 0, 0) rotate(180deg);
        }

        @include maxWidth($bp-tablet - 1) {
            display: none;
        }
    }

    &__Mobile {
        transform: translateX(4px);

        @include minWidth($bp-tablet) {
            display: none;
        }
    }
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    cursor: pointer;
    background: 0 0;
    transition: visibility 0s 0.15s, opacity 0.15s ease;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    user-select: none;

    @include maxWidth($bp-tablet - 1) {
        &__Visible {
            opacity: 1;
            visibility: visible;
            transition: none;
            transition: visibility 0s, opacity 0.15s ease;

            .modal_Layout {
                opacity: 1;
            }

            .modal_Inner {
                pointer-events: all;
            }
        }
    }
}

.modal_Layout {
    position: relative;
    height: 100%;
    min-width: 250px;
    width: 100%;
    padding-top: var(--layout-header-height);
    background: 0 0;
    opacity: 0;
    overflow: hidden;
    cursor: default;
    pointer-events: none;
    transition: opacity 0.2s linear;
}

.modal_Inner {
    height: 100%;
    overflow-y: auto;
    background-color: var(--color-bg-default);
    pointer-events: none;
}

.modal_User {
    padding: var(--space-m) var(--space-xl);
    margin-bottom: var(--space-s);
    border-bottom: 1px solid var(--color-bg-border);
}

.modal_Menu {
    margin-top: var(--space-s);
    margin-bottom: var(--space-s);
}

.modal_UserControls {
    display: flex;
    gap: var(--space-s);

    & > * {
        flex-shrink: 0;
    }
}

.user {
    display: flex;
    align-items: center;

    &__Collapsed {
        justify-content: center;

        .user_Settings {
            width: 100%;
        }
    }

    .userCard {
        width: 100%;
    }
}

.settings {
    width: 24px;
    height: 24px;
    color: inherit;

    svg {
        width: 20px;
        height: auto;
    }
}

.userTooltip {
    display: flex;
    flex-direction: column;
    gap: 8px;

    &__default {
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        grid-gap: var(--space-s);
    }

    &__extra {
        max-width: 300px;
    }
}

.themeSwitch {
    display: flex;
    align-items: center;

    &:only-child {
        grid-column: 1 / -1;
    }
}
