@mixin sidebar-base {
    top: 0;
    bottom: 0;
    position: fixed;
    overflow-y: auto;
    z-index: 1000;
    background-color: var(--sidebar-background-color);
    padding-inline: var(--sidebar-padding-x);
    padding-block: var(--sidebar-padding-y);
}

@mixin sidebar-left {
    left: 0;
    border-right: var(--sidebar-border-color) var(--sidebar-border-style) var(--sidebar-border-width);
    border-top-right-radius: var(--sidebar-border-radius);
    border-bottom-right-radius: var(--sidebar-border-radius);
}

@mixin sidebar-right {
    right: 0;
    border-left: var(--sidebar-border-color) var(--sidebar-border-style) var(--sidebar-border-width);
    border-top-left-radius: var(--sidebar-border-radius);
    border-bottom-left-radius: var(--sidebar-border-radius);
}

.sidebar {
    @include sidebar-base;
    width: var(--sidebar-width);
    transition: transform .2s ease;

    &.sidebar-left {
        @include sidebar-left;
        transform: translateX(-100%);

        &.hide {
            transform: translateX(-100%);
        }
    }

    &.sidebar-right {
        @include sidebar-right;
        transform: translateX(100%);

        &.hide {
            transform: translateX(100%);
        }
    }

    &.show {
        transform: translateX(0);
    }
}


.sidebar-fixed {
    @include sidebar-base;
    width: var(--sidebar-width);

    &.sidebar-left {
        @include sidebar-left;
    }

    &.sidebar-right {
        @include sidebar-right;
    }
}

.sidebar-compact {

    @include sidebar-base;
    width: var(--sidebar-compact-width);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: width .2s ease;

    .sidebar-item {
        display: flex;
        justify-content: center;
        gap: var(--sidebar-compact-gap);
    }

    &.sidebar-left {
        @include sidebar-left;
    }

    &.sidebar-right {
        @include sidebar-right;
    }

    &.hide,
    &[hidden] {
        width: var(--sidebar-compact-width-reduce);
    }

    &.show {
        width: var(--sidebar-compact-width);
    }
}

.sidebar-item {
    overflow-x: hidden;
}


.sidebar-item.hide {
    justify-content: center;

    .sidebar-text {
        display: none;
    }
}

.sidebar-item.show {
    justify-content: flex-start;

    .sidebar-text {
        display: block;
    }
}


body:has(.sidebar.sidebar-shift),
body:has(.sidebar-compact.sidebar-shift) {
    transition: margin-left .2s ease,
    margin-right .2s ease;
}


body:has(.sidebar-compact.sidebar-left.sidebar-shift.show) {
    margin-left: var(--sidebar-compact-width);
}

body:has(.sidebar-compact.sidebar-left.sidebar-shift.hide) {
    margin-left: var(--sidebar-compact-width-reduce);
}

body:has(.sidebar-compact.sidebar-right.sidebar-shift.show) {
    margin-right: var(--sidebar-compact-width);
}

body:has(.sidebar-compact.sidebar-right.sidebar-shift.hide) {
    margin-right: var(--sidebar-compact-width-reduce);
}

body:has(.sidebar-compact.sidebar-left):not(:has(.sidebar-compact.sidebar-left.sidebar-shift)) {
    margin-left: var(--sidebar-compact-width-reduce);
}

body:has(.sidebar-compact.sidebar-right):not(:has(.sidebar-compact.sidebar-right.sidebar-shift)) {
    margin-right: var(--sidebar-compact-width-reduce);
}


body:has(.sidebar.sidebar-shift.sidebar-left.show) {
    margin-left: var(--sidebar-width);
}

body:has(.sidebar.sidebar-shift.sidebar-right.show) {
    margin-right: var(--sidebar-width);
}


body:has(.sidebar-fixed.sidebar-left) {
    margin-left: var(--sidebar-width);
}

body:has(.sidebar-fixed.sidebar-right) {
    margin-right: var(--sidebar-width);
}


.sidebar-shift {
}