/* line 21, app/assets/stylesheets/application/outfit-viewer.sass */
outfit-viewer {
  display: block;
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  user-select: none;
  -webkit-user-select: none;
}

/* line 35, app/assets/stylesheets/application/outfit-viewer.sass */
outfit-viewer outfit-layer {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* line 46, app/assets/stylesheets/application/outfit-viewer.sass */
outfit-viewer outfit-layer img, outfit-viewer outfit-layer iframe {
  width: 100%;
  height: 100%;
}

/* line 50, app/assets/stylesheets/application/outfit-viewer.sass */
outfit-viewer .loading-indicator {
  position: absolute;
  z-index: 1000;
  bottom: 0px;
  right: 4px;
  padding: 8px;
  background: radial-gradient(circle closest-side, white 45%, #ffffff00);
  opacity: 0;
}

/* line 60, app/assets/stylesheets/application/outfit-viewer.sass */
outfit-viewer .play-pause-button {
  position: absolute;
  z-index: 1001;
  left: 8px;
  bottom: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  color: white;
  background: rgba(0, 0, 0, 0.64);
  width: 2.5em;
  height: 2.5em;
  border-radius: 100%;
  border: 2px solid transparent;
  transition: all .25s;
}

/* line 76, app/assets/stylesheets/application/outfit-viewer.sass */
outfit-viewer .play-pause-button .playing-label, outfit-viewer .play-pause-button .paused-label {
  display: none;
  width: 1em;
  height: 1em;
}

/* line 81, app/assets/stylesheets/application/outfit-viewer.sass */
outfit-viewer .play-pause-button .play-pause-toggle {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* line 91, app/assets/stylesheets/application/outfit-viewer.sass */
outfit-viewer .play-pause-button .play-pause-toggle:checked ~ .playing-label {
  display: block;
}

/* line 94, app/assets/stylesheets/application/outfit-viewer.sass */
outfit-viewer .play-pause-button .play-pause-toggle:not(:checked) ~ .paused-label {
  display: block;
}

/* line 97, app/assets/stylesheets/application/outfit-viewer.sass */
outfit-viewer .play-pause-button:hover, outfit-viewer .play-pause-button:has(.play-pause-toggle:focus) {
  border: 2px solid #060;
  background: #efe;
  color: #040;
}

/* line 102, app/assets/stylesheets/application/outfit-viewer.sass */
outfit-viewer .play-pause-button:has(.play-pause-toggle:active) {
  transform: translateY(2px);
}

/* line 106, app/assets/stylesheets/application/outfit-viewer.sass */
outfit-viewer:has(outfit-layer:state(has-animations)) .play-pause-button {
  display: flex;
}

/* line 109, app/assets/stylesheets/application/outfit-viewer.sass */
outfit-viewer:has(outfit-layer:state(loading)) {
  cursor: wait;
}

/* line 13, app/assets/stylesheets/application/outfit-viewer.sass */
outfit-viewer:has(outfit-layer:state(loading)) .loading-indicator {
  opacity: 1;
  transition-delay: 2s;
}

@starting-style {
  /* line 13, app/assets/stylesheets/application/outfit-viewer.sass */
  outfit-viewer:has(outfit-layer:state(loading)) .loading-indicator {
    opacity: 0;
  }
}

/* line 116, app/assets/stylesheets/application/outfit-viewer.sass */
outfit-viewer:has(outfit-layer[highlighted]) outfit-layer[highlighted] {
  z-index: 999;
  backdrop-filter: grayscale(1) brightness(2) blur(1px);
}

/* line 124, app/assets/stylesheets/application/outfit-viewer.sass */
outfit-viewer:has(outfit-layer[highlighted]) outfit-layer[highlighted] ~ outfit-layer[highlighted] {
  backdrop-filter: none;
}