@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;
@use "@progress/kendo-theme-core/scss/components/scrollview/_theme.scss" as *;

@mixin kendo-scrollview--theme() {
    @include kendo-scrollview--theme-base();

    .k-scrollview {
        &.k-scrollview-dark {
            kendo-scrollview-pager,
            .k-scrollview-nav-wrap {
                background-color: $kendo-scrollview-pager-dark-bg;
            }
        }

        &.k-scrollview-light {
            kendo-scrollview-pager,
            .k-scrollview-nav-wrap {
                background-color: $kendo-scrollview-pager-light-bg;
            }
        }
    }

    .k-scrollview-next,
    .k-scrollview-prev {
        text-shadow: $kendo-scrollview-navigation-arrow-shadow;

        &:focus,
        &.k-focus {
            .k-icon::before {
                box-shadow: $kendo-scrollview-navigation-focus-shadow;
            }
        }

        &:hover,
        &.k-hover {
            text-shadow: $kendo-scrollview-navigation-arrow-hover-shadow;
        }
    }

    .k-scrollview-nav > .k-link {
        &.k-primary {
            &:focus,
            &.k-focus {
                box-shadow: $kendo-scrollview-pagebutton-primary-focus-shadow;
            }

            &:hover,
            &.k-hover {
                box-shadow: $kendo-scrollview-pagebutton-primary-hover-shadow;
            }
        }

        &:focus,
        &.k-focus {
            box-shadow: $kendo-scrollview-pagebutton-focus-shadow;
        }

        &:hover,
        &.k-hover {
            box-shadow: $kendo-scrollview-pagebutton-hover-shadow;
        }
    }
}