﻿.mud-ex-slidebar {
    margin: 0;
    position: fixed;
    --mud-ex-slide-bar-collapsed-size: 20px;

    &.relative-to-parent {
        position: absolute;
        z-index: unset;
    }

    .mud-tab-slider {
        opacity: 0;
    }

    &.bottom {
        transform: translateY(80%);
        width: 100%;
        bottom: 0;

        &.open {
            transform: translateY(0);
        }

        &:not(.open) {
            transform: translateY(calc(100% - var(--mud-ex-slide-bar-collapsed-size))); // 20px ist die sichtbare Höhe der Komponente, wenn sie ausgeblendet ist
            height: var(--mud-ex-slide-bar-collapsed-size);
        }
    }

    &.top {
        width: 100%;
        height: auto;
        top: 0;

        &.open {
            transform: translateY(0);
        }

        &:not(.open) {
            transform: translateY(calc(-100% + var(--mud-ex-slide-bar-collapsed-size))); // 20px ist die sichtbare Höhe der Komponente, wenn sie ausgeblendet ist
            height: var(--mud-ex-slide-bar-collapsed-size);
        }
    }

    &.left {
        width: auto;
        height: 100%;
        left: 0;

        .mud-tabs {
            height: 100%
        }

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

        &:not(.open) {
            transform: translateX(calc(-100% + var(--mud-ex-slide-bar-collapsed-size))); // 20px ist die sichtbare Breite der Komponente, wenn sie ausgeblendet ist
            width: var(--mud-ex-slide-bar-collapsed-size);
        }
    }

    &.right {
        width: auto;
        height: 100%;
        right: 0;

        .mud-tabs {
            height: 100%
        }

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

        &:not(.open) {
            transform: translateX(calc(100% - var(--mud-ex-slide-bar-collapsed-size))); // 20px ist die sichtbare Breite der Komponente, wenn sie ausgeblendet ist
            width: var(--mud-ex-slide-bar-collapsed-size);
        }
    }

    &.open {
        opacity: 1;

        .mud-tab-slider {
            opacity: 1;
        }
    }
}
