:root {
  /*Image Viewer General*/
  --controlsBackgroundColor: rgba(38, 38, 38, 0.3);

  /*Close Bar Variables*/
  --closeBarPadding: 2px;

  /*Close Button Variables*/
  --closeButtonSize: calc(var(--defaultFontSize) * 1.5);

  /*Image Tray Variables*/
  --imageTrayHeight: 14dvh;
  --imageTrayPadding: 0.7dvh;
  --imageTrayButtonBorderSize: 2px;

  /*Slide Container Variables*/
  --currentSlideHeight: calc(100dvh - var(--imageTrayHeight) - (var(--imageTrayPadding) * 2));

  /*Loading Circle*/
   --loadingCircleSize: clamp(2rem, calc(1rem + 1vw), 300px);

}

/*Image Viewer*/

#imageViewer {
  position: fixed;
  inset: 0;
  z-index: var(--imageViewerLayer);
  background-color: var(--elementColor);
  overflow-y: auto;
  display: none;
  opacity: 0;
  transform: scale(.8);
  transition: opacity 0.2s, transform 0.2s;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overscroll-behavior: none;
}

.imageViewerDisplay {
  display: flex !important;
}

.imageViewerOpacityAndTransform {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/*Close Bar*/

#closeBar {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  background-color: var(--controlsBackgroundColor);
  padding: var(--closeBarPadding);
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.001;
  transition: opacity 0.2s;
  z-index: 100;
}

#closeBar:hover,
#closeBar:has(button:focus-visible),
.closeBarShow {
  opacity: 1 !important;
}

#closeBar button {
  all: unset;
  cursor: pointer;
  min-width: 25px;
  font-size: var(--closeButtonSize);
  aspect-ratio: 1/1;
  background-color: #00000000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 5px;
  border: #00000000 solid var(--focusSize);
  box-sizing: border-box;
}

#closeBar button:focus-visible {
  border: var(--focusColor) solid var(--focusSize);
}

/*Slide Container*/

#slideContainer {
  flex: 1;
  min-height: calc(var(--loadingCircleSize) * 1.5);
  height: var(--currentSlideHeight);
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
}

#slideContainer img {
  height: 100%;
  width: 100%;
  max-width: 100%;
  object-fit: scale-down;
  background-color: rgb(9, 9, 9);
  position: absolute;
  transition: opacity 0.2s;
}

.currentSlide {
  z-index: 1;
}

.nextSlide {
  z-index: 2;
  opacity: 0;
}

.slideFadeIn {
  opacity: 1;
}

.loading {
  z-index: 3;
  position: absolute;
}

/*Image Tray*/

#imageTray {
  background-color: var(--controlsBackgroundColor);
  width: 100%;
  min-height: 20px;
  height: var(--imageTrayHeight);
  padding: var(--imageTrayPadding);
  gap: var(--imageTrayPadding);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
}

#imageTray li {
  height: 100%;
}

#imageTray button {
  all: unset;
  cursor: zoom-in;
  height: 100%;
  width: auto;
  aspect-ratio: 1/1;
  transition: filter 0.2s;
  border: var(--imageTrayButtonBorderSize) var(--thumbnailBackgroundColor) solid;
  box-sizing: border-box;
  background-color: var(--thumbnailBackgroundColor);
}

.selected {
  border: var(--imageTrayButtonBorderSize) #00c5cc solid !important;
}

#imageTray img {
  height: 100%;
  width: auto;
  aspect-ratio: 1/1;
  object-fit: scale-down;
}

#imageTray button:hover,
#imageTray button:focus-visible {
  filter: brightness(1.1);
}

#imageTray button:active {
  filter: brightness(1.2);
}

#imageTray button:focus-visible {
  border: var(--imageTrayButtonBorderSize) var(--focusColor) solid !important;
}

/*Loading Circle*/

.loading {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #00000000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--loadingCircleSize);
  z-index: 5;
}

  @media (max-width: 300px) {
    #imageTray {
      min-height: 50px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #imageViewer {
      transition: opacity 0.2s linear, transform 0.2s linear;
      transform: scale(1);
    }

    #closeBar {
      transition: opacity 0.2s linear;
    }

    #slideContainer img {
      transition: opacity 0.2s linear;
    }

    #imageTray button {
      transition: filter 0.2s linear;
    }
  }