// Components :: Pager :: Styles

@import '../../styles/settings/index';
@import '../../styles/tools/index';

.c-pager {
  list-style: none;
  margin: 0;
  text-align: center;
  width: 100%;

  li {
    display: inline-flex;

    &.slick-active,
    &.active {
      button {
        @include fabric-circle(
          $fabric-global-spacing-unit-small,
          fabric-color('dark-grey')
        );

        cursor: default;
      }
    }
  }
  button {
    @include fabric-circle(
      $fabric-global-spacing-unit-small,
      fabric-color('light-grey')
    );

    cursor: pointer;
    font-size: 0;
    margin: 0 $fabric-global-spacing-unit-tiny;
    padding: 0;
  }
}