@layer components {
  [data-coco][data-component="pager-button"] {
    @apply block py-2.5 px-1 bg-background-dark-3 bg-opacity-40 hover:bg-opacity-60 scale-75 hover:scale-100 lg:scale-100 lg:hover:scale-125 transition-all;
    width: min-content;

    .coco-icon {
      @apply relative text-content-light-1;
    }

    &[data-direction="previous"] {
      @apply origin-left rounded-r-md;

      .coco-icon {
        @apply -ml-1;
      }
    }

    &[data-direction="next"] {
      @apply origin-right rounded-l-md;

      .coco-icon {
        @apply -mr-1;
      }
    }
  }
}