@import "./base.scss";

.thumbnail-image picture {
  background-color: black;
}

.theme-preview-item picture,
.thumbnail-image picture {
  /* Use smaller inner corner radius bc of outer outlines using 12px */
  border-radius: 9px;
}

.thumbnail-image.no-round picture {
  border-radius: 0;
}

.theme-preview-item .window {
  border-radius: 6px;
  box-shadow:
    0 1px 4px 1px rgba(black, 0.13),
    0 1px 10px 5px rgba(black, 0.09),
    0 3px 16px 8px rgba(black, 0.04),
    0 0 0 1px rgba(black, 0.05);
}

.theme-preview-item .window .header-bar {
  min-height: 15px;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.theme-preview-item .window .header-bar.dark {
  box-shadow: inset 0 -1px var(--borders-dark);
}
.theme-preview-item .window .header-bar.light {
  box-shadow: inset 0 -1px var(--borders-light);
}

.theme-preview-item .window.light {
  background-color: #fafafa;
  color: rgba(black, 0.8);
}

.theme-preview-item .window.front.light .header-bar {
  background-color: #ebebeb;
}

.theme-preview-item .window.dark {
  background-color: #242424;
  color: white;
}

.theme-preview-item .window.front.dark .header-bar {
  background-color: #303030;
}

.theme-preview-item,
.background-flowbox-child {
  background: none;
  border-radius: 12px;
  padding: 3px;
  box-shadow: none;
  outline: none;
}

.theme-preview-item:checked,
.background-flowbox-child:selected {
  box-shadow: 0 0 0 3px var(--accent-bg-color);
}

.theme-preview-item:focus:focus-visible,
.background-flowbox-child:focus:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--accent-bg-color), 0.3);
}

.theme-preview-item:checked:focus:focus-visible,
.background-flowbox-child:selected:focus:focus-visible {
  box-shadow:
    0 0 0 3px var(--accent-bg-color),
    0 0 0 6px rgba(var(--accent-bg-color), 0.3);
}

.img-remove-button {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  text-shadow: none;
  padding: 0;
  border-radius: 100%;
  margin-top: 4px;
  margin-right: 4px;
  box-shadow: none;
  border: none;
  min-width: 24px;
  min-height: 24px;
  transition: all var(--transition-time);
}

.img-remove-button:hover {
  box-shadow: none;
  background: rgba(0, 0, 0, 0.6);
  border: none;
}

.img-remove-button:active {
  box-shadow: none;
  background: rgba(0, 0, 0, 0.4);
  border: none;
}

.pulse-scale {
  /* https://gitlab.gnome.org/GNOME/gtk/-/issues/5171 */
  transform: translate(0, 6px);
}

.storage-row {
  padding: 10px;
}

.storage-row-usage {
  margin-top: 4px;
  border-radius: 6px;
}

.storage-row-usage progress,
.storage-row-usage trough {
  border-radius: 0px;
  min-height: 24px;
}

/* Accent widgets (Thanks gnome-control-center) */

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

.power-info-banner {
  padding: 8px;
}
.power-device {
  padding: 8px;

  separator {
    background: var(--card-fg-color);
  }
}

batterygraphwidget {
  padding: 8px;
  color: var(--border-color);

  & > .spinner {
    color: var(--card-fg-color);
  }

  & > label {
    color: var(--card-fg-color);
    margin: 0 4px;
  }

  graphbar {
    --bar-color: var(--card-bg-color);
    background: linear-gradient(lighter(var(--bar-color)), var(--bar-color));
    border: 2px solid darker(var(--bar-color));
    margin: 0 1px;
    min-height: 5px;
    border-radius: 10px;

    &.normal {
      --bar-color: var(--accent-green);
    }
    &.low {
      --bar-color: var(--accent-yellow);
    }
    &.critical {
      --bar-color: var(--accent-red);
    }
  }
}
