.dashboard-layout {
    width: 100%;
    height: 100%;
}

.desktop-layout {
    display: grid;
    grid-template-areas:
        'header-bar'
        'content-layout'
        'player-bar';
    grid-template-rows: var(--layout-header-height) minmax(0, 1fr) var(--layout-player-bar-height);
    width: 100%;
    height: 100svh;
    min-height: 0;
    max-height: 100svh;
    overflow: hidden;
}

.content-layout {
    display: grid;
    grid-area: content-layout;
    width: 100%;
    max-width: 100vw;
    min-height: 0;
    overflow: hidden;
}

.nav-bar-container {
    position: relative;
    height: calc(100svh - var(--layout-header-height) - var(--layout-player-bar-height));
    padding: var(--layout-base-padding);
    padding-top: calc(var(--layout-base-padding) / 2);
    padding-right: calc(var(--layout-base-padding) / 2);
    padding-bottom: calc(var(--layout-base-padding) / 2);
}

.drag-handle-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    transition: background-color 0.3s ease-in-out;

    &:hover {
        background-color: var(--layout-drag-handle-background-color);
    }
}

.drag-handle-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    transition: background-color 0.3s ease-in-out;

    &:hover {
        background-color: var(--layout-drag-handle-background-color);
    }
}

.is-dragging-left {
    background-color: var(--layout-drag-handle-background-color);
}

.nav-bar-side {
    height: 100%;
    overflow: auto;
    background-color: var(--layout-nav-bar-side-background-color);
    border-right: 1px solid var(--layout-border-color);
    border-radius: var(--layout-base-border-radius);
}

.content-container {
    width: 100%;
    height: calc(100svh - var(--layout-header-height) - var(--layout-player-bar-height));
    padding: var(--layout-base-padding);
    padding-top: calc(var(--layout-base-padding) / 2);
    padding-bottom: calc(var(--layout-base-padding) / 2);
    padding-left: calc(var(--layout-base-padding) / 2);
}

.content {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--layout-content-background-color);
    border-radius: var(--layout-base-border-radius);
}

.content > div {
    padding: 0 -1rem;
}

.header-bar-container {
    grid-area: header-bar;
    width: 100%;
    height: 100%;
    padding: var(--layout-base-padding);
    padding-bottom: calc(var(--layout-base-padding) / 2);
}

.header-bar {
    width: 100%;
    height: 100%;
    height: var(--layout-header-height);
    border-bottom: 1px solid var(--layout-border-color);
}

.player-bar-container {
    grid-area: player-bar;
    width: 100%;
    height: 100%;
    padding: var(--layout-base-padding);
    padding-top: calc(var(--layout-base-padding) / 2);
    border-top: 1px solid var(--layout-border-color);
}

.player-bar {
    width: 100%;
    height: 100%;
    padding: var(--layout-player-bar-padding);
    background-color: var(--layout-player-bar-background-color);
    border-radius: var(--layout-base-border-radius);
}

.right-content-container {
    position: relative;
    height: 100%;
    padding: var(--layout-base-padding);
    padding-top: calc(var(--layout-base-padding) / 2);
    padding-bottom: calc(var(--layout-base-padding) / 2);
    padding-left: calc(var(--layout-base-padding) / 2);
    border-left: 1px solid var(--layout-border-color);
}

.right-content {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--layout-nav-bar-side-background-color);
    border-radius: var(--layout-base-border-radius);
}

.mobile-layout {
    display: grid;
    grid-template-areas:
        'content-layout'
        'nav-bar';
    grid-template-rows: minmax(0, 1fr) var(--layout-nav-bar-bottom-height);
    width: 100%;
    height: 100%;
}

.mobile-layout > .content-container {
    height: calc(100svh - var(--layout-nav-bar-bottom-height));
}
