@reference "#styles/assets/tailwind.css";

.lg-next,
.lg-prev {
  @apply shadow-custom flex bg-surface-default-default p-2 text-lg leading-none text-icon-petrol-default transition-default hover:bg-surface-turquoise-hover hover:text-icon-turquoise-default lg:p-4 lg:text-xl;
  &::before,
  &::after {
    display: none;
  }
}

.lg-prev {
  @apply scale-x-[-1];
}

.lg-counter,
.lg-sub-html,
.lg-toolbar .lg-icon {
  @apply font-display text-white;
}

.lg-outer {
  .lg-content {
    .lg-item {
      &.lg-empty-html {
        .lg-sub-html {
          display: block;
        }
      }

      .lg-sub-html {
        margin: 0 auto;
        bottom: auto;
        white-space: normal;
        padding: 10px 0;
        opacity: 0;
        transition: opacity 0.25s;
        font-size: inherit;

        &.caption-visible {
          opacity: 1;
        }

        p {
          font-size: inherit;
        }
      }
    }
  }
}

body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-img-wrap {
  @apply lg:scale-75;
}

.lg-backdrop {
  @apply bg-petrol/85;
}