#video-page {
  --accent-color: white;
  --accent-bg-color: white;
}

#video-page popover {
  --accent-color: var(--window-fg-color);
  --accent-bg-color: var(--window-fg-color);
}

scale.highlighted slider {
  transition: transform 0.3s;
}

button.highlighted:hover,
menubutton.highlighted > button:hover,
windowcontrols.overlaid > button:hover > image {
  background-color: alpha(white, 0.15);
}

scale.highlighted slider:hover {
  transform: scale(1.2);
}

scale.highlighted slider:active {
  transform: scale(0.9);
}

button.highlighted,
menubutton.highlighted > button,
windowcontrols.overlaid > button > image {
  background-color: transparent;
}

button.overlaid > image,
button.overlaid > label,
menubutton.overlaid > button > box > image,
menubutton.overlaid > button > box > label,
menubutton.overlaid > button > box > arrow,
image.overlaid,
label.overlaid,
windowcontrols.overlaid > button > image,
.spinner.overlaid {
  color: white;
  filter: drop-shadow(0 0 18px black);
}

scale.overlaid trough {
  color: white;
}

scale.overlaid trough highlight,
scale.overlaid slider {
  background-color: white;
}

#play-button.overlaid > image {
  filter: drop-shadow(0 0 18px alpha(black, 0.4));
}

.shade {
  background-image: linear-gradient(
    alpha(black, 0.3),
    alpha(black, 0.4),
    alpha(black, 0.5),
    alpha(black, 0.6),
    alpha(black, 0.7)
  );
}

toast {
  background-color: alpha(black, 0.9);
}

.timestamp {
  margin-top: -6px;
}

.selection-toolbar > button {
  border-radius: 2em;
  padding: 0.1em 0.6em 0.1em 0.8em;
}

#play-button image {
  -gtk-icon-size: 32px;
  padding: 12px;
}

#bottom-overlay-box {
  margin-bottom: -6px;
}

#end-timestamp-button {
  padding: 0 12px;
}

/* Drag overlay, from Loupe */
/* https://gitlab.gnome.org/GNOME/loupe/-/blob/d66dd0f16bf45b3cd46e3a084409513eaa1c9af5/data/resources/style.css#L31 */
.showtime-dragging-area-highlight {
  border-radius: 8px;
  background-color: alpha(var(--accent-bg-color), 0.35);
  margin: 24px;
}
