:host {
  --thumbnails-width: 7rem;

  display: block;
}

  :host * {
    box-sizing: border-box;
  }

.pdf-reader {
  position: fixed;
  z-index: var(--s-z-40);
  background-color: var(--s-surface-neutral-subdued);
  inset: 0;
  touch-action: pan-x pan-y;

  /* Reset default dialog styles */
  border: none;
  padding: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  overflow: visible;
}

.pdf-reader::backdrop {
    display: none;
  }

.pdf-reader:not([open]) {
    display: none;
  }

.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body {
    animation: 0.15s pdf-reader-fade-in;
  }

@media (prefers-reduced-motion) {

.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body {
      animation: none
  }
    }

.pdf-reader--closing {
  animation: 0.15s pdf-reader-fade-out;
  animation-fill-mode: forwards;
}

@media (prefers-reduced-motion) {

.pdf-reader--closing {
    animation: none
}
  }

.pdf-reader--show-thumbnails .pdf-reader__thumbnails {
    max-width: var(--thumbnails-width);
  }

.pdf-reader--show-thumbnails .pdf-reader__floating-tools {
    left: calc(var(--s-space-16) + var(--thumbnails-width));
  }

.pdf-reader--hide-menu .pdf-reader__menu {
    display: none;
  }

.pdf-reader__body {
  position: relative;
  width: 100%;
  height: 100%;
}

.pdf-reader__header {
  display: flex;
  height: 4rem;
  padding-right: var(--s-space-16);
  padding-left: var(--s-space-16);
  align-items: center;
  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
  background-color: var(--s-background-default);
  gap: var(--s-space-8);
}

.pdf-reader__header-left,
.pdf-reader__header-right {
  display: flex;
  flex-grow: 1;
  align-items: center;
  gap: var(--s-space-8);
  min-width: 0;
}

@media (min-width: 768px) {

.pdf-reader__header-left,
.pdf-reader__header-right {
    flex-basis: calc(100 / 3 * 1%);
    flex-grow: 0
}
  }

.pdf-reader__header-right {
  justify-content: flex-end;
  flex-shrink: 0;
}

.pdf-reader__header-center {
  display: none;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  gap: var(--s-space-16);
}

@media (min-width: 768px) {

.pdf-reader__header-center {
    display: flex
}
  }

.pdf-reader__label {
  overflow: hidden;
  flex-grow: 1;
  font-weight: var(--s-font-weight-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pdf-reader__zoom-button-container {
  display: flex;
  align-items: center;
  gap: var(--s-space-8);
}

.pdf-reader__zoom-button-container > *:not(:last-child) {
    position: relative;
  }

.pdf-reader__zoom-button-container > *:not(:last-child):after {
      position: absolute;
      top: 50%;
      right: calc(-1 * var(--s-space-4));
      width: var(--s-border-width-default);
      height: 1.5rem;
      background-color: var(--s-border-default);
      content: "";
      transform: translate3d(50%, -50%, 0);
    }

.pdf-reader__zoom-select-container {
  position: relative;
}

.pdf-reader__zoom-select {
  display: inline-flex;
  height: 2.5rem;
  padding-right: var(--s-space-12);
  padding-right: calc(var(--s-space-8) + 1.5rem + var(--s-space-12));
  padding-left: var(--s-space-12);
  justify-content: flex-start;
  align-items: center;
  border: var(--s-border-width-default) solid var(--s-border-default);
  border-radius: var(--s-border-radius-sm);
  color: var(--s-interactive-neutral-default);
  background-color: transparent;
  font: inherit;
  font-weight: var(--s-font-weight-medium);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.pdf-reader__zoom-select:focus:not(:focus-visible) {
    outline: none;
  }

.pdf-reader__zoom-select:focus-visible {
    outline-color: var(--s-focus-default);
  }

.pdf-reader__zoom-select-icon {
  position: absolute;
  top: 50%;
  right: var(--s-space-8);
  display: inline-flex;
  transform: translateY(-50%);
  pointer-events: none;
}

.pdf-reader__content {
  display: flex;
  width: 100%;
  height: calc(100% - 4rem);
}

.pdf-reader__thumbnails {
  display: flex;
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 0;
  height: 100%;
  padding-top: var(--s-space-16);
  padding-bottom: var(--s-space-16);
  flex-basis: var(--thumbnails-width);
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
  background-color: var(--s-background-default);
  flex-direction: column;
  transition: max-width 0.2s linear;
  box-shadow: inset calc(-1 * var(--s-border-width-default)) 0 0 0
    var(--s-border-default);
  gap: var(--s-space-4);
}

.pdf-reader__thumbnail {
  width: 5rem;
  margin: 0;
  padding: 0;
  border: var(--s-border-width-default) solid var(--s-border-default);
  background-color: transparent;
  cursor: pointer;
}

.pdf-reader__thumbnail > img {
    display: inline-flex;
    width: 100%;
  }

.pdf-reader__thumbnail--active {
  border-width: 0.125rem;
  border-color: var(--s-border-highlight);
}

.pdf-reader__viewer {
  flex-grow: 1;
}

.pdf-reader__mobile-zoom-controls {
  position: absolute;
  z-index: 1;
  right: var(--s-space-16);
  bottom: var(--s-space-32);
  display: flex;
  padding-bottom: var(--s-space-4);
  flex-direction: column;
  gap: var(--s-space-8);
}

@media (min-width: 768px) {

.pdf-reader__mobile-zoom-controls {
    display: none
}
  }

.pdf-reader__mobile-zoom-button {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%;
  color: var(--s-icon-on-image);
  background-color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: opacity 0.15s;
  pointer-events: auto;
}

.pdf-reader__mobile-zoom-button:disabled {
    cursor: default;
  }

.pdf-reader__floating-tools {
  position: fixed;
  z-index: 1;
  bottom: var(--s-space-16);
  left: var(--s-space-16);
  display: none;
  flex-direction: column;
  transition: left 0.2s linear;
  gap: var(--s-space-12);
}

@media (min-width: 768px) {

.pdf-reader__floating-tools {
    display: flex
}
  }

.pdf-reader__floating-tool-button {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%;
  color: var(--s-icon-on-image);
  background-color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.pdf-reader__meta {
  display: flex;
  padding-top: var(--s-space-4);
  padding-right: var(--s-space-16);
  padding-bottom: var(--s-space-4);
  padding-left: var(--s-space-8);
  align-items: center;
  gap: var(--s-space-12);
}

@media (min-width: 768px) {

.pdf-reader__meta {
    max-width: 18rem
}
  }

.pdf-reader__file-icon {
  display: inline-flex;
  padding-left: var(--s-space-4);
  flex-shrink: 0;
}

.pdf-reader__file-info {
  display: flex;
  min-width: 0;
  flex-grow: 1;
  flex-direction: column;
}

@keyframes pdf-reader-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pdf-reader-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}