#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);
}

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

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

windowcontrols.overlaid > button > image {
  transition: background-color 0.2s;
}

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

button.highlighted:active,
menubutton.highlighted > button:active {
  transform: scale(0.8);
}

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

button.highlighted,
menubutton.highlighted > button {
  transition: transform 0.2s, background-color 0.2s;
}

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

/* Strong Shadow */
image.overlaid,
label.overlaid,
spinner.overlaid,
button.overlaid > image,
button.overlaid > label,
menubutton.overlaid > button > box > image,
menubutton.overlaid > button > box > arrow,
menubutton.overlaid > button > box > label,
windowcontrols.overlaid > button > image {
  color: white;
  filter: drop-shadow(0 0 1px alpha(black, 0.4))
    drop-shadow(0 0 3px alpha(black, 0.1))
    drop-shadow(0 0 9px alpha(black, 0.3));
}

#play-button > image {
  filter: drop-shadow(0 0 1px alpha(black, 0.5))
    drop-shadow(0 0 3px alpha(black, 0.1))
    drop-shadow(0 0 6px alpha(black, 0.2));
}

#backwards-button > image,
#forwards-button > image {
  filter: drop-shadow(0 0 1px alpha(black, 0.5))
    drop-shadow(0 0 6px alpha(black, 0.4));
}

scale.overlaid {
  filter: drop-shadow(0 0 6px alpha(black, 0.3));
}

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

.shade {
  background-image: linear-gradient(
    alpha(black, 0.3) 0%,
    alpha(black, 0.2) 10%,
    alpha(black, 0.15) 20%,
    alpha(black, 0.1) 30%,
    alpha(black, 0.1) 65%,
    alpha(black, 0.15) 75%,
    alpha(black, 0.25) 85%,
    alpha(black, 0.4) 100%
  );
}

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;
}
