:root {
    --fan-header-height: 70px;
    --fan-sidebar-width: 400px;
    --fan-header-transition: 0.3s;
}

@media (max-width: 500px) {
    :root {
        --fan-sidebar-width: 100%;
    }
}

.sidebar-container {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    position: fixed;
    z-index: 4;
    height: 100dvh;
    width: var(--fan-sidebar-width);
    background-color: var(--style_prop_colour_content_section_background, var(--colour-background));
    right: calc(var(--fan-sidebar-width) * -1);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
    transition: right var(--fan-header-transition),
    width var(--fan-header-transition);
}

.sidebar-container[data-toggle=show] {
    right: 0;
}

.sidebar-container .sidebar-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    min-height: var(--fan-header-height);
    background-color: var(--style_prop_colour_fan_header_background, var(--colour-secondary-background));
    color: var(--style_prop_colour_fan_header_text, var(--colour-font-secondary));
}

.sidebar-icon-container {
    font-size: 26px;
    height: 35px;
    width: 48px;
    margin: auto 0;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar-title {
    font-size: 24px;
    margin: 10px;
    flex-grow: 1;
}

.sidebar-overlay {
    z-index: 3;
    position: fixed;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--fan-header-transition);
    backdrop-filter: blur(2px);
    width: calc(100%);
    height: 100vh;
}

.sidebar-container[data-toggle=show] + .sidebar-overlay {
    opacity: 1;
    cursor: pointer;
    pointer-events: all;
}

.sidebar-container .sidebar-footer {
    border-top: 1px solid var(--colour-field-border, var(--colour-well-border));
    padding: 15px;
    width: 100%;
    height: 75px;
}

.sidebar-container .sidebar-footer div.base-btn-container {
    margin: 0;
}

.sidebar-container .sidebar-footer button.base-btn {
    flex-basis: 50px;
}

.sidebar-content-container {
    padding: 15px;
    height: 100%;
    color: var(--style_prop_colour_font);
}

body:has(.sidebar-container[data-toggle=show]) {
    overflow: hidden;
}

.sidebar-content-container {
    overflow: scroll;
    scrollbar-width: none;
}