@layer components {
  .pagination {
    @apply flex mr-auto;
    .page-item {
      &.active .page-link {
        @apply box font-medium dark:bg-darkmode-400;
      }
      .page-link {
        min-width: 40px;
        @apply btn shadow-none font-normal flex items-center justify-center border-transparent text-slate-800 mr-2 dark:text-slate-300;
      }
    }
  }
}

.pagination {
  @include media-breakpoint-down(sm) {
    @apply w-full mr-0;
  }
  .page-item {
    @include media-breakpoint-down(sm) {
      @apply flex-1;
      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3),
      &:nth-child(7),
      &:nth-child(8),
      &:nth-child(9) {
        .page-link {
          @apply px-1;
        }
      }
    }
    .page-link {
      @include media-breakpoint-down(sm) {
        @apply min-w-0 mr-0;
      }
    }
  }
}