.#{$prefix}boxscroller {
    display: flex;
    overflow: hidden;

    &.#{$prefix}tool-align-start > .#{$prefix}tool {
        align-self: flex-start;
    }

    &.#{$prefix}tool-align-end > .#{$prefix}tool {
        align-self: flex-end;
    }

    &.#{$prefix}tool-align-center > .#{$prefix}tool {
        align-self: center;
    }

    &.#{$prefix}tool-align-stretch {
        &.#{$prefix}horizontal > .#{$prefix}tool {
            height: auto !important;
        }

        &.#{$prefix}vertical > .#{$prefix}tool {
            width: auto !important;
        }

        > .#{$prefix}tool {
            align-self: stretch;
        }
    }
}

.#{$prefix}boxscroller-body {
    display: flex;
    overflow: hidden;
    align-items: flex-start;
    flex: 1 1 auto;
    box-sizing: content-box;

    > .#{$prefix}body-el {
        flex: none;
    }
}

.#{$prefix}boxscroller {
    &.#{$prefix}horizontal {
        flex-direction: row;

        .#{$prefix}boxscroller-body {
            // hide the scrollbar
            padding-bottom: 100px;
            margin-bottom: -100px;

            > .#{$prefix}body-el {
                min-width: 100%;
                padding-left: 0;
                padding-right: 0;
            }
        }
    }

    &.#{$prefix}vertical {
        flex-direction: column;

        .#{$prefix}boxscroller-body {
            // hide the scrollbar
            padding-right: 100px;
            margin-right: -100px;

            > .#{$prefix}body-el {
                min-height: 100%;
                padding-top: 0;
                padding-bottom: 0;
            }
        }
    }
}