:root {
  // Transition
  --parvus-transition-duration: 0.3s;
  --parvus-transition-timing-function: cubic-bezier(0.62, 0.16, 0.13, 1.01);

  // Overlay
  --parvus-background-color: hsl(23deg 44% 96%);
  --parvus-color: hsl(228deg 24% 23%);

  // Button
  --parvus-btn-background-color: hsl(228deg 24% 23%);
  --parvus-btn-color:  hsl(0deg 0% 100%);
  --parvus-btn-hover-background-color: hsl(229deg 24% 33%);
  --parvus-btn-hover-color: hsl(0deg 0% 100%);
  --parvus-btn-disabled-background-color: hsla(229deg 24% 33% / 60%);
  --parvus-btn-disabled-color: hsl(0deg 0% 100%);

  // Caption
  --parvus-caption-background-color: transparent;
  --parvus-caption-color: hsl(228deg 24% 23%);

  // Loading error
  --parvus-loading-error-background-color: hsl(0deg 0% 100%);
  --parvus-loading-error-color: hsl(228deg 24% 23%);

  // Loader
  --parvus-loader-background-color: hsl(23deg 40% 96%);
  --parvus-loader-color: hsl(228deg 24% 23%);
}

::view-transition-group(lightboximage) {
  animation-duration: var(--parvus-transition-duration);
  animation-timing-function: var(--parvus-transition-timing-function);
  z-index: 7;
}

::view-transition-group(toolbar) {
	z-index: 8;
}

body:has(.parvus[open]) {
  touch-action: none;
}

/**
 * Parvus trigger
 *
 */
.parvus-trigger:has(img) {
  display: block;
  position: relative;


  & .parvus-zoom__indicator {
    align-items: center;
    background-color: var(--parvus-btn-background-color);
    color: var(--parvus-btn-color);
    display: flex;
    justify-content: center;
    padding: 0.5rem;
    position: absolute;
    inset-inline-end: 0.5rem;
    inset-block-start: 0.5rem;
  }

  & img {
    display: block;
  }
}

/**
 * Parvus
 *
 */
.parvus {
  background-color: transparent;
  block-size: 100%;
  border: 0;
  box-sizing: border-box;
  color: var(--parvus-color);
  contain: strict;
  inline-size: 100%;
  inset: 0;
  margin: 0;
  max-block-size: unset;
  max-inline-size: unset;
  overflow: hidden;
  overscroll-behavior: contain;
  padding: 0;
  position: fixed;

  &::backdrop {
    display:none;
  }

  & *,
  & *::before,
  & *::after {
    box-sizing: border-box;
  }

  &__overlay {
    background-color: var(--parvus-background-color);
    color: var(--parvus-color);
    inset: 0;
    position: absolute;
  }

  &__slider {
    inset: 0;
    position: absolute;
    transform: translateZ(0);

    @media screen and (prefers-reduced-motion: no-preference) {

      &--animate:not(&--is-dragging) {
        transition: transform var(--parvus-transition-duration) var(--parvus-transition-timing-function);
        will-change: transform;
      }
    }

    &--is-draggable {
      cursor: grab;
      touch-action: pan-y pinch-zoom;
    }

    &--is-dragging {
      cursor: grabbing;
      touch-action: none;
    }
  }

  &__slide {
    block-size: 100%;
    contain: layout;
    display: grid;
    inline-size: 100%;
    padding-block: 1rem;
    padding-inline: 1rem;
    place-items: center;


    & img {
      block-size: auto;
      display: block;
      inline-size: auto;
      margin-inline: auto;
      transform: translateZ(0);
    }
  }

  &__content {



    &--error {
      background-color: var(--parvus-loading-error-background-color);
      color: var(--parvus-loading-error-color);
      padding-block: 0.5rem;
      padding-inline: 1rem;
    }
  }

  &__caption {
    background-color: var(--parvus-caption-background-color);
    color: var(--parvus-caption-color);
    padding-block-start: 0.5rem;
    text-align: start;
  }

  &__loader {
    display: inline-block;
    block-size: 6.25rem;
    inset-inline-start: 50%;
    position: absolute;
    inset-block-start: 50%;
    transform: translate(-50%, -50%);
    inline-size: 6.25rem;

    &::before {
      animation: spin 1s infinite linear;
      border-radius: 100%;
      border: 0.25rem solid var(--parvus-loader-background-color);
      border-block-start-color: var(--parvus-loader-color);
      content: '';
      inset: 0;
      position: absolute;
      z-index: 1;
    }
  }

  &__toolbar {
    align-items: center;
    display: flex;
    inset-block-start: 1rem;
    inset-inline: 1rem;
    justify-content: space-between;
    pointer-events: none;
    position: absolute;
    view-transition-name: toolbar;
    z-index: 8;


    & > * {
      pointer-events: auto;
    }
  }

  &__controls {
    display: flex;
    gap: 0.5rem;
  }

  &__btn {
    appearance: none;
    background-color: var(--parvus-btn-background-color);
    background-image: none;
    border-radius: 0;
    border: 0.0625rem solid transparent;
    color: var(--parvus-btn-color);
    cursor: pointer;
    display: flex;
    font: inherit;
    padding: 0.3125rem;
    position: relative;
    touch-action: manipulation;
    will-change: transform, opacity;
    z-index: 7;

    &:hover,
    &:focus-visible {
      background-color: var(--parvus-btn-hover-background-color);
      color: var(--parvus-btn-hover-color);
    }


    &--previous {
      inset-inline-start: 0;
      position: absolute;
      inset-block-start: calc(50svh - 1rem); // 50svh - paddingTop from .parvus__slide
      transform: translateY(-50%);
    }

    &--next {
      position: absolute;
      inset-inline-end: 0;
      inset-block-start: calc(50svh - 1rem); // 50svh - paddingTop from .parvus__slide
      transform: translateY(-50%);
    }

    & svg {
      pointer-events: none;
    }

    &[aria-hidden='true'] {
      display: none;
    }

    &[aria-disabled='true'] {
      background-color: var(--parvus-btn-disabled-background-color);
      color: var(--parvus-btn-disabled-color);
    }
  }

  &__counter {
    position: relative;
    z-index: 7;

    &[aria-hidden='true'] {
      display: none;
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {

    &__overlay,
    &__counter,
    &__btn--close,
    &__btn--previous,
    &__btn--next,
    &__caption {
      transition: transform var(--parvus-transition-duration) var(--parvus-transition-timing-function), opacity var(--parvus-transition-duration) var(--parvus-transition-timing-function);
      will-change: transform, opacity;
    }

    &--is-opening,
    &--is-closing {



      & .parvus__overlay,
      & .parvus__counter,
      & .parvus__btn--close,
      & .parvus__btn--previous,
      & .parvus__btn--next,
      & .parvus__caption {
        opacity: 0;
      }
    }

    &--is-vertical-closing,
    &--is-zooming {



      & .parvus__counter,
      & .parvus__btn--close {
        transform: translateY(-100%);
        opacity: 0;
      }

      & .parvus__btn--previous {
        transform: translate(-100%, -50%);
        opacity: 0;
      }

      & .parvus__btn--next {
        transform: translate(100%, -50%);
        opacity: 0;
      }

      & .parvus__caption {
        transform: translateY(100%);
        opacity: 0;
      }
    }
  }
}

@keyframes spin {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}