/* File video actions and the focused scene player share each page's theme. */
.scenario-file-item {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.scenario-file-folder {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.scenario-file-meta {
  white-space: nowrap;
}

.scenario-file-video {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent-dark);
  background: var(--accent-soft);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}

.scenario-file-video svg {
  flex: none;
  width: 17px;
  height: 17px;
}

.scenario-file-video:hover {
  color: #fff;
  background: var(--accent);
}

.scenario-file-video:focus-visible,
.scenario-video-panel button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.scenario-file-video:disabled {
  opacity: 0.6;
  cursor: wait;
}

.scenario-video-dialog {
  width: min(900px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  color: var(--text);
  background: var(--panel, #fff);
  box-shadow: var(--shadow);
  overflow-y: auto;
}

.scenario-video-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.scenario-video-panel {
  position: relative;
  padding: clamp(20px, 4vw, 32px);
}

.scenario-video-panel h2 {
  margin: 0 44px 8px 0;
  font-size: clamp(24px, 4vw, 32px);
}

.scenario-video-panel .dialog-close {
  width: 44px;
  height: 44px;
}

#scenarioVideoFilename {
  margin: 0 0 18px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

#scenarioVideoStatus {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--accent-soft);
}

#scenarioVideoStatus:empty {
  display: none;
}

#scenarioVideoPlayer {
  display: block;
  width: 100%;
  max-height: min(65vh, 600px);
  border-radius: var(--radius);
  background: #111;
}

#scenarioVideoReauthorize {
  margin-top: 16px;
}

#scenarioVideoPlayer[hidden],
#scenarioVideoStatus[hidden],
#scenarioVideoReauthorize[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .scenario-file-item {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 12px;
  }

  .scenario-file-name {
    grid-column: 1 / -1;
  }

  .scenario-file-meta {
    grid-column: auto;
  }

  .scenario-file-video {
    justify-self: end;
  }
}

@media (max-width: 420px) {
  .scenario-file-item {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 14px;
  }

  .scenario-file-meta {
    justify-self: end;
  }

  .scenario-file-video {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

/* Display-only entries share the road-list video action, without a file size. */
.scenario-file-item--directory {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

@media (max-width: 720px) {
  .scenario-file-item--directory {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .scenario-file-item--directory .scenario-file-type {
    justify-self: start;
  }
}