.viewer-close,
.viewer-nav {
  border: var(--stroke-small) solid var(--border-primary);
  border-radius: var(--radius-xsmall);
  background: var(--background-primary);
  color: var(--content-primary);
  overflow: hidden;
}

.viewer-close {
  position: absolute;
  top: var(--padding-edge);
  right: var(--padding-edge);
  display: flex;
  width: var(--control-small);
  height: var(--control-small);
  padding: 0;
  cursor: pointer;
}

.viewer-close-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: background-color var(--duration-hover) var(--ease-reveal);
}

.viewer-nav {
  position: absolute;
  right: var(--padding-edge);
  bottom: var(--padding-edge);
  display: flex;
  align-items: stretch;
}

.viewer-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-small);
  height: var(--control-small);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--content-primary);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color var(--duration-hover) var(--ease-reveal);
}

.viewer-step + .viewer-step {
  border-left: var(--stroke-small) solid var(--border-primary);
}

@media (hover: hover) {
  .viewer-close:hover .viewer-close-face,
  .viewer-step:hover {
    background: var(--background-transparent);
  }
}

.viewer-close:active .viewer-close-face,
.viewer-step:active {
  background: var(--background-transparent-pressed);
}

@media (prefers-reduced-motion: reduce) {
  .viewer-close-face,
  .viewer-step {
    transition: none;
  }
}