.p-galleria {
  @apply overflow-hidden rounded-md border border-surface-200 dark:border-surface-700;
}

.p-galleria-content {
  @apply flex flex-col;
}

.p-galleria-items-container {
  @apply relative flex flex-col;
}

.p-galleria-items {
  @apply relative flex h-full;
}

.p-galleria-nav-button {
  @apply absolute top-1/2 mx-2 -mt-12 mb-0 inline-flex h-12 w-12 cursor-pointer select-none items-center justify-center overflow-hidden rounded-full border-none bg-white/10 p-0 text-surface-100 transition-colors duration-200 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary enabled:hover:bg-white/20 enabled:hover:text-surface-0;
}

.p-galleria-next-icon,
.p-galleria-prev-icon {
  @apply h-6 w-6 text-2xl;
}

.p-galleria-prev-button {
  @apply start-0;
}

.p-galleria-next-button {
  @apply end-0;
}

.p-galleria-prev-button:dir(rtl) {
  @apply end-0 start-auto;
}
.p-galleria-next-button:dir(rtl) {
  @apply end-auto start-0;
}

.p-galleria-item {
  @apply flex h-full w-full items-center justify-center;
}

.p-galleria-hover-navigators .p-galleria-nav-button {
  @apply pointer-events-none opacity-0 transition-opacity duration-200 ease-in-out;
}

.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button {
  @apply pointer-events-auto opacity-100;
}

.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button.p-disabled {
  @apply pointer-events-none;
}

.p-galleria-caption {
  @apply absolute bottom-0 left-0 w-full bg-black/5 p-4 text-surface-100;
}

.p-galleria-thumbnails {
  @apply flex flex-shrink-0 flex-col overflow-auto;
}

.p-galleria-thumbnail-nav-button {
  @apply relative mx-2 my-0 h-8 w-8 flex-shrink-0 flex-grow-0 basis-auto cursor-pointer select-none items-center justify-center self-center overflow-hidden rounded-md border-none bg-transparent p-0 text-surface-600 transition-colors duration-200 hover:bg-surface-100 hover:text-surface-700 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-0;
}

.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-next-icon,
.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-prev-icon {
  @apply h-4 w-4 text-base;
}

.p-galleria-thumbnails-content {
  @apply flex flex-row bg-surface-0 px-1 py-4 dark:bg-surface-900;
}

.p-galleria-thumbnails-viewport {
  @apply w-full overflow-hidden;
}

.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left)
  .p-galleria-thumbnail-prev-button:dir(rtl),
.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left)
  .p-galleria-thumbnail-next-button:dir(rtl) {
  @apply rotate-180;
}

.p-galleria-thumbnail-items {
  @apply flex;
}

.p-galleria-thumbnail-item {
  @apply flex cursor-pointer items-center justify-center overflow-auto opacity-50;
}

.p-galleria-thumbnail {
  @apply outline-transparent transition-opacity duration-300 hover:opacity-100;
}

.p-galleria-thumbnail-item-current {
  @apply opacity-100;
}

.p-galleria-thumbnails-left .p-galleria-content,
.p-galleria-thumbnails-right .p-galleria-content {
  @apply flex-row;
}

.p-galleria-thumbnails-left .p-galleria-items-container,
.p-galleria-thumbnails-right .p-galleria-items-container {
  @apply flex-row;
}

.p-galleria-thumbnails-left .p-galleria-items-container,
.p-galleria-thumbnails-top .p-galleria-items-container {
  @apply order-2;
}

.p-galleria-thumbnails-left .p-galleria-thumbnails,
.p-galleria-thumbnails-top .p-galleria-thumbnails {
  @apply order-1;
}

.p-galleria-thumbnails-left .p-galleria-thumbnails-content,
.p-galleria-thumbnails-right .p-galleria-thumbnails-content {
  @apply flex-grow flex-col;
}

.p-galleria-thumbnails-left .p-galleria-thumbnail-items,
.p-galleria-thumbnails-right .p-galleria-thumbnail-items {
  @apply h-full flex-col;
}

.p-galleria-indicator-list {
  @apply m-0 flex list-none items-center justify-center gap-2 p-4;
}

.p-galleria-indicator-button {
  @apply m-0 inline-flex h-4 w-4 cursor-pointer select-none items-center rounded-full border-none bg-surface-200 p-0 transition-colors duration-200 hover:bg-surface-300 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary dark:bg-surface-700 dark:hover:bg-surface-600;
}

.p-galleria-indicator-active .p-galleria-indicator-button {
  @apply bg-primary;
}

.p-galleria-indicators-left .p-galleria-items-container,
.p-galleria-indicators-right .p-galleria-items-container {
  @apply flex-row items-center;
}

.p-galleria-indicators-left .p-galleria-items,
.p-galleria-indicators-top .p-galleria-items {
  @apply order-2;
}

.p-galleria-indicators-left .p-galleria-indicator-list,
.p-galleria-indicators-top .p-galleria-indicator-list {
  @apply order-1;
}

.p-galleria-indicators-left .p-galleria-indicator-list,
.p-galleria-indicators-right .p-galleria-indicator-list {
  @apply flex-col;
}

.p-galleria-inset-indicators .p-galleria-indicator-list {
  @apply absolute z-10 flex bg-black/50;
}

.p-galleria-inset-indicators .p-galleria-indicator-button {
  @apply bg-white/40 hover:bg-white/60;
}

.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button {
  @apply bg-white/90;
}

.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list {
  @apply left-0 top-0 w-full items-start;
}

.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicator-list {
  @apply right-0 top-0 h-full items-end;
}

.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicator-list {
  @apply bottom-0 left-0 w-full items-end;
}

.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicator-list {
  @apply left-0 top-0 h-full items-start;
}

.p-galleria-mask {
  @apply fixed left-0 top-0 flex h-full w-full items-center justify-center;
}

.p-galleria-close-button {
  @apply absolute right-0 top-0 m-2 flex h-12 w-12 cursor-pointer select-none items-center justify-center overflow-hidden rounded-full border-none bg-white/10 p-0 text-surface-50 transition-colors duration-200 hover:bg-white/20 hover:text-surface-0 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary;
}

.p-galleria-close-icon {
  @apply h-6 w-6 text-2xl;
}

.p-galleria-mask .p-galleria-nav-button {
  @apply fixed top-1/2;
}

.p-galleria-enter-active {
  @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)];
}

.p-galleria-leave-active {
  @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)];
}

.p-galleria-enter-from,
.p-galleria-leave-to {
  @apply scale-75 opacity-0;
}

.p-galleria-enter-active .p-galleria-nav-button {
  @apply opacity-0;
}

.p-items-hidden .p-galleria-thumbnail-item {
  @apply invisible;
}

.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
  @apply visible;
}
