@use 'theme-variables' as *;

@include export-module('h-scroll-theme') {

  .sf-hscroll-nav {
    background: $hscroll-bg;
    color: $hscroll-arrow-icon-color;

    &.sf-scroll-left-nav {
      border-right: $hscroll-border-width $hscroll-border-style $hscroll-border-color;
    }

    &.sf-scroll-right-nav {
      border-left: $hscroll-border-width $hscroll-border-style $hscroll-border-color;
    }

    &:hover {
      background: $hscroll-bg-hover;
    }

    &:focus {
      background: $hscroll-bg-focus;
    }

    &:active {
      background: $hscroll-bg-pressed;
    }
  }

  .sf-rtl .sf-hscroll-nav {

    &.sf-scroll-left-nav {
      border-left: $hscroll-border-width $hscroll-border-style $hscroll-border-color;
      border-right: 0;
    }

    &.sf-scroll-right-nav {
      border-left: 0;
      border-right: $hscroll-border-width $hscroll-border-style $hscroll-border-color;
    }
  }
}