@include exports("scrollview/layout") {

    // refactor when https://github.com/telerik/kendo-angular-scrollview/issues/130 is done
    kendo-scrollview.k-scrollview-wrap,
    div.k-scrollview {
        border-width: $scrollview-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $scrollview-font-family;
        font-size: $scrollview-font-size;
        line-height: $scrollview-line-height;
        position: relative;
        overflow: hidden;
        display: block;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-scrollview,
        ul.k-scrollview-wrap {
            list-style-type: none;
            position: absolute;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            cursor: default;

            img {
                user-select: none;
            }

            & > li {
                display: inline-block;
                overflow: hidden;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        .k-scrollview-pageable,
        .k-scrollview-nav {
            margin: 0;
            padding: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            text-align: center;
            list-style: none;
            position: absolute;
            left: 0;
            bottom: $scrollview-pager-offset;
            pointer-events: none;
        }

        .k-scrollview-pageable > li.k-button,
        .k-scrollview-nav > li.k-link {
            margin: 0 $scrollview-pager-item-spacing;
            padding: 0;
            width: $scrollview-pagebutton-size;
            height: $scrollview-pagebutton-size;
            box-sizing: content-box;
            display: inline-block;
            position: relative;
            flex: 0 0 $scrollview-pagebutton-size;
            border-width: $scrollview-pager-item-border-width;
            border-style: solid;
            border-radius: 50%;
            cursor: pointer;
            pointer-events: all;

            &::before {
                content: "";
                width: $scrollview-pagebutton-size + $scrollview-pager-item-spacing;
                height: $scrollview-pager-height;
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }

        // remove when https://github.com/telerik/kendo-angular-scrollview/issues/130 is done
        .k-scrollview-pageable > li.k-button::before {
            pointer-events: initial;
            border-radius: 0;
        }

        .k-scrollview-next,
        .k-scrollview-prev {
            display: table;
            position: absolute;
            padding: 0;
            height: 60%;
            top: 20%;
            text-decoration: none;
            user-select: none;
            cursor: pointer;
            overflow: hidden;
            -webkit-tap-highlight-color: $scrollview-arrow-tap-highlight-color;
        }

        .k-scrollview-prev {
            left: 0;
        }

        .k-scrollview-next {
            right: 0;
        }

        .k-scrollview-next span,
        .k-scrollview-prev span {
            display: table-cell;
            margin: 0;
            padding: 0;
            vertical-align: middle;
            font-size: $scrollview-arrow-icon-size;
            font-weight: normal;
        }

        .k-scrollview-elements {
            width: 100%;
        }

        .k-scrollview-animation {
            transition-duration: .3s;
            transition-timing-function: ease-in-out;
        }

    }

    // refactor when https://github.com/telerik/kendo-angular-scrollview/issues/130 is done
    div.k-scrollview {

        div.k-scrollview-wrap {
            white-space: nowrap;

            & > [data-role="page"] {
                vertical-align: top;
                display: inline-block;
                min-height: 1px;
            }
        }

        .k-scrollview-nav-wrap {
            position: absolute;
            bottom: ($scrollview-pager-offset - ($scrollview-pager-item-spacing / 4));
            left: ($scrollview-pager-item-spacing / 2);
            right: ($scrollview-pager-item-spacing / 2);
            height: $scrollview-pager-height;
            overflow: hidden;

            .k-scrollview-nav {
                margin: 0;
                padding: ($scrollview-pager-item-spacing / 4) 0 0 0;
                display: block;
                white-space: nowrap;
                overflow-x: scroll;
                overflow-y: hidden;
                text-align: center;
                list-style: none;
                position: static;
                pointer-events: initial;

                > li {
                    vertical-align: top;
                }
            }
        }

    }

    @supports (-webkit-user-select: none) {
        kendo-scrollview.k-scrollview-wrap ul.k-scrollview li > *,
        div.k-scrollview ul.k-scrollview-wrap li > * {
            pointer-events: auto;
        }
    }

    @supports (not (-webkit-user-select: none)) {
        kendo-scrollview.k-scrollview-wrap ul.k-scrollview li > *,
        div.k-scrollview ul.k-scrollview-wrap li > * {
            pointer-events: none;
        }
    }

}