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

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

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

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

#play-button:active > image {
  transform: scale(0.5);
}

button.highlighted > *,
menubutton.highlighted > button > *,
windowcontrols.overlaid > button > image,
#play-button > image,
scale.highlighted slider {
  transition: transform 0.2s;
}

/* 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 {
  color: white;
  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%
  );
}

.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/b59a69b2cce84aff2d43221d7b8771d2104e9e7e/data/resources/style.css#L44 */
.showtime-dragging-area-highlight {
  color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-bg-color) 8%, transparent);
  /* Same color for border as for icon and label */
  /* Probably due to a GTK bug, this currently does not give the exact same color */
  border: 2px dashed color-mix(in srgb, currentColor var(--dim-opacity), transparent);
  border-radius: 2px;
  margin: 12px;
}

.showtime-dragging-area-highlight label {
  opacity: var(--dim-opacity);
}

.drop-widget {
  box-shadow: none;
}

@media (prefers-contrast: more) {
  windowcontrols.overlaid > button > image,
  windowcontrols.overlaid > button,
  windowcontrols.overlaid > button:hover,
  .overlaid button,
  button.overlaid {
    box-shadow: initial;
  }

  windowcontrols.overlaid > button:hover > image,
  .overlaid button:hover,
  button.overlaid:hover {
    box-shadow: 0 0 0 1px white;
  }

  .shade {
    background-image: linear-gradient(
      alpha(black, 0.5) 0%,
      alpha(black, 0.4) 10%,
      alpha(black, 0.35) 20%,
      alpha(black, 0.3) 30%,
      alpha(black, 0.3) 65%,
      alpha(black, 0.35) 75%,
      alpha(black, 0.45) 85%,
      alpha(black, 0.6) 100%
    );
  }
}
