/*
 * Post Pagination Widget Styles
 */

.ek-post-pagination {
  @apply flex flex-wrap items-center gap-5;

  /* Layout variants */
  &.ek-post-pagination--column {
    @apply flex-col items-start;
  }

  /* Individual navigation items */
  .ek-post-pagination-item {
    @apply flex items-center gap-2;
  }

  /* The clickable link */
  .ek-post-pagination-link {
    @apply flex items-center gap-2 no-underline transition-all duration-300;

    text-decoration: none;

    &:hover {
      text-decoration: none;
    }
  }

  /* Next link — text before icon, keep icon on the right */
  .ek-pagination-next {
    @apply flex-row-reverse;

    .ek-pagination-text {
      @apply text-right;
    }
  }

  /* Previous link text — left-aligned */
  .ek-pagination-prev {
    .ek-pagination-text {
      @apply text-left;
    }
  }

  /* Text group (label + optional post title) */
  .ek-pagination-text {
    @apply flex flex-col;
  }

  /* Label (e.g. "Previous Post") */
  .ek-pagination-label {
    @apply text-ekl-neutral-700 transition-all duration-300;
  }

  /* Optional adjacent post title */
  .ek-pagination-post-title {
    @apply font-semibold text-ekl-neutral-900 transition-all duration-300;
  }

  /* Icon wrapper */
  .ek-pagination-icon {
    @apply flex items-center justify-center transition-all duration-300;

    i {
      @apply text-base text-ekl-neutral-700 leading-none transition-all duration-300;
    }

    svg {
      @apply w-4 h-4 fill-ekl-neutral-700 transition-all duration-300;
    }
  }

  /* Vertical separator (shown when enabled) */
  .ek-pagination-separator {
    @apply self-stretch w-px bg-ekl-neutral-200;
  }
}