.vuetable-pagination {
  @apply flex;
  .vuetable-pagination__link {
    min-width: 40px;
    @apply button font-normal flex items-center justify-center border-transparent text-gray-800 ml-2;
    @media (max-width: $sm) {
      @apply flex-1 min-w-0 mr-0;
      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3),
      &:nth-child(7),
      &:nth-child(8),
      &:nth-child(9) {
        &.vuetable-pagination__link {
          @apply px-1;
        }
      }
    }
    &.vuetable-pagination__link--active {
      @apply bg-gray-200 font-medium;
    }
    .vuetable-pagination__icon {
      background-size: 100%;
      @apply block w-full h-full bg-center;
      &.vuetable-pagination__icon--first {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevrons-left w-4 h-4'%3E%3Cpolyline points='11 17 6 12 11 7'%3E%3C/polyline%3E%3Cpolyline points='18 17 13 12 18 7'%3E%3C/polyline%3E%3C/svg%3E");
      }
      &.vuetable-pagination__icon--prev {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-left w-4 h-4'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
      }
      &.vuetable-pagination__icon--next {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right w-4 h-4'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
      }
      &.vuetable-pagination__icon--last {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevrons-right w-4 h-4'%3E%3Cpolyline points='13 17 18 12 13 7'%3E%3C/polyline%3E%3Cpolyline points='6 17 11 12 6 7'%3E%3C/polyline%3E%3C/svg%3E");
      }
    }
  }
}

.dark {
  .vuetable-pagination {
    .vuetable-pagination__link {
      @apply text-gray-300;
      &.vuetable-pagination__link--active {
        @apply bg-dark-3;
      }
    }
  }
}