.scrollable-panel-container {
    position: relative;
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        background: transparent url(../../images/scrollable-panel-shadow.png) repeat-x left top;
        transition: height 0.1s, width 0.1s;
    }

    &.scrolled {
        &:before {
            height: 9px;
        }
    }

    &.horizontal {
        &:before {
            top: 0;
            width: 0;
            height: 100%;
        }
    }

    &.horizontal.scrolled:before {
        &:before {
            width: 9px;
            background: transparent url(../../images/scrollable-panel-shadow-horizontal.png) repeat-x left top;
        }
    }

    .scrollable {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
    }
}