.#{$package-prefix}-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: rem-calc(335);
    z-index: 1;
    background-color: $very-light-gray;
    transition: all $global-transition-speed;

    > .header {
        @include sia-header-bar;
        font-family: 'Brandon Grotesque Light';
        text-transform: none;
        transition: all $global-transition-speed;

        .trigger {
            cursor: pointer;
            width: rem-calc(30);
            height: rem-calc(30);
        }
    }

    > .content {
        height: 100%;
        max-height: calc( 100% - 112px );

        > * {
            padding: rem-calc(13);
        }
    }

    > .footer {
        @include sia-footer-bar;
        position: absolute;
        bottom: 0;
    }

    &.left {
        left: 0;

        .header {
            .trigger {
                float: right;
                background-image: sai-arrow-right-svg();

                &.open {
                    background-image: sai-arrow-left-svg();
                }
            }
            .title {
                float: left;
            }
        }

        &.collapsed {
            left: rem-calc(-335);

            .header {
                transform: translateX(rem-calc(55));
            }
        }
    }

    &.right {
        right: 0;

        .header {
            .trigger {
                float: left;
                background-image: sai-arrow-left-svg();

                &.open {
                    background-image: sai-arrow-right-svg();
                }
            }
            .title {
                float: right;
            }
        }

        &.collapsed {
            right: rem-calc(-335);

            .header {
                transform: translateX(rem-calc(-55));
            }
        }
    }
}