<script lang="ts">
  export let className: string;
  export const ssr = false;
</script>

<div class="pagination {className}" />

<div class="navigation {className}">
  <div class="navigation__item navigation__item--prev">
    <svg width="15" height="22" viewBox="0 0 15 22" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M13 2L3 11L13 20" stroke="#445667" stroke-width="4" />
    </svg>
  </div>
  <div class="navigation__item navigation__item--next">
    <svg width="15" height="22" viewBox="0 0 15 22" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M2 20L12 11L2 2" stroke="#445667" stroke-width="4" />
    </svg>
  </div>
</div>

<style lang="scss">
  @import 'src/scss/media';
  @import 'src/scss/variables';

  .navigation {
    display: flex;
    align-items: center;

    &__item {
      background: $dove;
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 100%;
      margin-right: 24px;
      cursor: pointer;
      transition: 0.4s ease-in-out;

      @include breakpoint-down('deskS') {
        width: 40px;
        height: 40px;
      }

      > svg {
        @include breakpoint-down('deskS') {
          width: 11px;
        }
      }

      &:last-of-type {
        margin-right: 0;
      }

      &:hover {
        background: $doveHover;
      }
    }

    & :global(.swiper-button-disabled) {
      opacity: 0.5;
      pointer-events: none;
    }

    & :global(.swiper-button-lock) {
      display: none;
    }
  }
</style>