/* Shared recording video chrome (GitHub issue #82). Partial: app/views/shared/components/_video_player.html.erb
   Loaded after application.css so --space-*, --color-*, etc. resolve. */
@layer components {

/* In-page video player for recordings — wrapper for custom overlay controls */
.recording-video-player {
  position: relative;
  display: block;
  max-width: 100%;
  max-height: 24rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-text) 88%, black);
}

.recording-video-player .recording-video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 24rem;
  object-fit: contain;
  border-radius: var(--radius);
  vertical-align: top;
  filter: brightness(1.08);
}

/* Large play overlay — visible when paused */
.recording-video__play-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  border: 0;
  background: color-mix(in srgb, black 65%, transparent);
  color: var(--color-primary-text);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--duration-normal) var(--ease-default), background var(--duration-normal) var(--ease-default);
}

.recording-video__play-overlay:hover {
  background: color-mix(in srgb, black 85%, transparent);
}

.recording-video__play-overlay--playing {
  opacity: 0;
  pointer-events: none;
}

.recording-video__play-overlay--playing:hover,
.recording-video-player:hover .recording-video__play-overlay--playing {
  opacity: 0.9;
  pointer-events: auto;
}

.recording-video__play-icon {
  width: 0;
  height: 0;
  margin-left: 0.35rem;
  border-style: solid;
  border-width: 1rem 0 1rem 1.6rem;
  border-color: transparent transparent transparent currentColor;
}

/* Time display — light text on dark background */
.recording-video__time {
  position: absolute;
  bottom: 2.5rem;
  left: 0.5rem;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: color-mix(in srgb, var(--color-nav-text) 96%, transparent);
  background: color-mix(in srgb, black 75%, transparent);
  border-radius: var(--radius-xs);
  font-variant-numeric: tabular-nums;
}

/* Hide native video time display so only our time pill shows (no duplicate clocks) */
.recording-video-player .recording-video::-webkit-media-controls-current-time-display,
.recording-video-player .recording-video::-webkit-media-controls-time-remaining-display {
  display: none !important;
}

/* In-page video (standalone, e.g. without wrapper) — contain keeps aspect ratio */
.recording-video {
  display: block;
  max-width: 100%;
  width: 100%;
  max-height: 24rem;
  object-fit: contain;
  border-radius: var(--radius);
  vertical-align: top;
  filter: brightness(1.08);
}

/* Prevent WebKit control overlay from darkening the video (gradient/panel over content) */
.recording-video::-webkit-media-controls-panel {
  background-image: linear-gradient(transparent, transparent) !important;
  background-color: transparent !important;
}

.recording-video::-webkit-media-controls-overlay-enclosure {
  background: transparent !important;
}

}