background-preview {
  border-radius: 6px;
}

background-preview .window {
  border-radius: 6px;
  box-shadow: 0 1px 4px 1px color-mix(in srgb, black 13%, transparent),
              0 1px 10px 5px color-mix(in srgb, black 9%, transparent),
              0 3px 16px 8px color-mix(in srgb, black 4%, transparent),
              0 0 0 1px color-mix(in srgb, black 5%, transparent);

  --window-bg-color: #fafafa;
  --headerbar-bg-color: white;
  --headerbar-shade-color: rgb(0 0 0 / 12%);
  --sidebar-bg-color: #ebebeb;
  --sidebar-backdrop-color: #f2f2f2;
  --sidebar-border-color: rgb(0 0 0 / 7%);
}

background-preview .window.dark {
  --window-bg-color: #242424;
  --headerbar-bg-color: #303030;
  --headerbar-shade-color: rgb(0 0 0 / 36%);
  --sidebar-bg-color: #303030;
  --sidebar-backdrop-color: #2a2a2a;
  --sidebar-border-color: rgb(0 0 0 / 36%);
}

background-preview .window .header-bar {
  min-height: 15px;
  box-shadow: 0 1px color-mix(in srgb, var(--headerbar-shade-color) 50%, transparent),
              0 2px 4px color-mix(in srgb, var(--headerbar-shade-color) 50%, transparent);
}

background-preview .window.front .header-bar {
  background-color: var(--headerbar-bg-color);
}

background-preview .window .sidebar {
  background-color: var(--sidebar-backdrop-color);
  min-width: 30px;
  border: none;
}

background-preview .window.front .sidebar {
  background-color: var(--sidebar-bg-color);
}

background-preview .window .sidebar:dir(ltr) {
  box-shadow: inset -1px 0 var(--sidebar-border-color);
}

background-preview .window .sidebar:dir(rtl) {
  border: none;
  box-shadow: inset 1px 0 var(--sidebar-border-color);
}

.background-preview-button {
  background: none;
  border-radius: 9px;
  padding: 3px;
  box-shadow: none;
  outline: none;
}

.background-preview-button:checked {
  box-shadow: 0 0 0 3px var(--accent-bg-color);
}

.background-preview-button:focus:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-bg-color), 0 0 0 6px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.background-preview-button:checked:focus:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-color), 0 0 0 6px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.background-flowbox > flowboxchild {
  background: none;
  border-radius: 9px;
}

.background-thumbnail {
  border-radius: 6px;
}

.slideshow-icon {
  color: white;
  -gtk-icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.33);
  margin: 8px;
}

.selected-check {
  color: var(--accent-fg-color);
  background: var(--accent-bg-color);
  border-radius: 100px;
  padding: 2px;
  opacity: 0;
  margin: 6px;
  transition-duration: 200ms;
}

flowboxchild.active-item .selected-check {
  opacity: 1;
}

.remove-button {
  padding: 2px;
  min-width: 0;
  min-height: 0;
  margin: 6px;
}

.accent-button {
  border-radius: 9999px;
  padding: 3px;
  background: var(--accent-bg-color);
  min-width: 24px;
  min-height: 24px;
  outline: none;
  background-clip: content-box;
  box-shadow: none;
}

.accent-button:checked {
  box-shadow: 0 0 0 3px var(--accent-bg-color);
}

.accent-button:focus:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.accent-button:checked:focus:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-bg-color),
              0 0 0 6px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.blue, .teal, .green, .yellow, .orange, .red, .pink, .purple, .slate {
  --accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab));
}

.blue {
  --accent-bg-color: var(--accent-blue);
}

.teal {
  --accent-bg-color: var(--accent-teal);
}

.green {
  --accent-bg-color: var(--accent-green);
}

.yellow {
  --accent-bg-color: var(--accent-yellow);
}

.orange {
  --accent-bg-color: var(--accent-orange);
}

.red {
  --accent-bg-color: var(--accent-red);
}

.pink {
  --accent-bg-color: var(--accent-pink);
}

.purple {
  --accent-bg-color: var(--accent-purple);
}

.slate {
  --accent-bg-color: var(--accent-slate);
}
