@import '../button/theme';
@import '../animation/effect';
@import './layout';

 $scrollview-navigation-color: $selected-text-color !default;
 $scrollview-navigation-icon-shadow: rgba(0, 0, 0, .3) 0 0 15px !default;
 $scrollview-pagebutton-shadow: 0 0 2px rgba(0, 0, 0, .08) !default;
 $scrollview-navigation-background: rgba(0, 0, 0, 0) !default;
 $scrollview-navigation-default-opacity: .7 !default;
 $scrollview-navigation-hover-opacity: 1 !default;
 $webkit-highlight-color: rgba(0, 0, 0, 0) !default;

@include exports('scrollview/theme') {
    .k-scrollview-pageable > li.k-button {
        background-image: none;
        box-shadow: $scrollview-pagebutton-shadow;
    }

    .k-scrollview-next,
    .k-scrollview-prev {
        background: $scrollview-navigation-background;
        outline-width: 0;
        -webkit-tap-highlight-color: $webkit-highlight-color;

        span {
            text-shadow: $scrollview-navigation-icon-shadow;
            color: $scrollview-navigation-color;
            opacity: $scrollview-navigation-default-opacity;
        }

        &:hover span {
            color: $scrollview-navigation-color;
            opacity: $scrollview-navigation-hover-opacity;
        }

        .k-icon:focus {
            color: $scrollview-navigation-color;
        }
    }

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