/* @docs */
$sidebar-overlay: hsla(0,0%,4%,.86) !default;
$sidebar-box-shadow: 5px 0px 13px 3px rgba($black, 0.1) !default;
$sidebar-content-background-color: $grey-lighter !default;
$sidebar-mobile-width: 80px !default;
$sidebar-width: 260px !default;
$sidebar-zindex: 38 !default;
/* @docs */

.o-side {
    &__content {
        @include avariable('background-color', 'sidebar-content-background-color', $sidebar-content-background-color);
        @include avariable('box-shadow', 'sidebar-box-shadow', $sidebar-box-shadow);
        @include avariable('width', 'sidebar-width', $sidebar-width);
        @include evariable(
            'z-index', 'calc($z-index + 1)',
            eparam('$z-index', variable('sidebar-zindex', $sidebar-zindex))
        );
        @each $name, $pair in $colors {
            $color: nth($pair, 1);
            &--#{$name} {
                @include avariable('background-color', ('variant-' + #{$name}), $color);
            }
        }
        &--fixed {
            position: fixed;
            left: 0;
            top: 0;
        }
        &--absolute {
            position: absolute;
            left: 0;
            top: 0;
        }
        &--right {
            left: auto;
            right: 0;
        }
        &--mini {
            @include avariable('width', 'sidebar-mobile-width', $sidebar-mobile-width);
        }
        &--mini-expand {
            &:hover {
                transition: width;
                @include avariable('transition-duration', 'transition-duration', $speed-slow);
                @include avariable('transition-timing-function', 'transition-timing', $easing);
                @include avariable('width', 'sidebar-width', $sidebar-width);
            }
        }
        &--static {
            position: static;
        }
        &--absolute, &--static {
            transition: width $speed-slow $easing;
        }
        &--fullwidth {
            width: 100%;
            max-width: 100%;
        }
        &--fullheight {
            height: 100%;
            max-height: 100%;
            overflow: hidden;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            align-content: stretch;
        }
    }
    &__overlay {
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        position: fixed;
        @include avariable('background', 'sidebar-overlay', $sidebar-overlay);
        @include avariable('z-index', 'sidebar-zindex', $sidebar-zindex);
    }
}