@use 'mixin' as *;
@use 'theme-variables' as *;

@include export-module('pager-theme') {
  .sf-pager {
    @include color-styles($pager-text-color, $pager-bg-color);
    border-color: $pager-border-color;

    .sf-icons.sf-disable {
      cursor: auto;
      color: $pager-numeric-text-bg-color;
    }

    svg.sf-disabled {
      opacity: unset;
    }

    .sf-focused {
      box-shadow: $pager-focus-shadow-color;
    }
  }

  .sf-pager-icons:hover {
    background-color: $pager-hover-bg-color;
    color: $pager-item-hover-text-color;
  }

  .sf-spacing {
    @include color-styles($pager-item-text-color);
  }

  .sf-numeric-item.sf-focused,
  .sf-pager .sf-icons.sf-focused {
    background-color: $pager-focus-bg-color;
    color: $pager-item-focus-text-color;
  }

  .sf-current-item,
  .sf-current-item.sf-focused {
    background-color: $pager-active-bg-color;
    color: $pager-item-active-text-color;
  }

  .sf-current-item:hover {
    background-color: $pager-current-hover-bg-color;
    color: $pager-item-active-text-color;
  }

  @media (max-width: 590px) {
    .sf-pager-icons:hover {
      @include color-styles($pager-mobile-hover-text-color, $pager-bg-color);
    }
  }
}