@import '../icons/main';
@import '../button/layout';

@include exports('scrollview/layout') {
    $scrollview-page-button-size: 8px;
    $scrollview-arrow-icon-size: 4.5em;

    .k-scrollview-wrap {
        position: relative;
        overflow: hidden;
        outline: 0;
        display: block;
    }

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

        img,
        li {
            user-select: none;
        }

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

        li > * {
            user-select: none;
            -webkit-user-drag: none;
            -khtml-user-drag: none;
            pointer-events: none;
        }
    }

    .k-scrollview-pageable {
        position: absolute;
        padding: 0;
        width: 100%;
        left: 0;
        bottom: 10px;
        margin: 0 auto;
        text-align: center;
        list-style: none;
        pointer-events: none;

        & > li.k-button {
            box-sizing: content-box;
            vertical-align: middle;
            display: inline-block;
            border-radius: 50%;
            padding: 0;
            margin: 10px;
            width: $scrollview-page-button-size;
            height: $scrollview-page-button-size;
            cursor: pointer;
            pointer-events: all;
        }
    }

    .k-scrollview-next,
    .k-scrollview-prev {
        display: table;
        position: absolute;
        padding: 0;
        height: 60%;
        top: 20%;
        user-select: none;
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        cursor: pointer;
        overflow: hidden;
    }

    .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%;
    }
}

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

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