/* Based on Highscore */
/* https://gitlab.gnome.org/World/highscore/-/blob/1fd2b1f31d416bc5ca2beeb15ad9fbbce050d7a4/src/library/library.css */
cover {
  font-weight: bold;
}

.cover-overlay-button-bg {
  background: var(--window-bg-color);
  color: var(--window-fg-color);
  border-radius: 99px;
  padding: 3px;
  --offset: 12px;
}

.cover-overlay-button-bg.top.left {
  transform: translate(calc(var(--offset) * -1), calc(var(--offset) * -1));
}

.cover-overlay-button-bg.top.right {
  transform: translate(var(--offset), calc(var(--offset) * -1));
}

.cover-overlay-button-bg.bottom.left {
  transform: translate(calc(var(--offset) * -1), var(--offset));
}

.cover-overlay-button-bg.bottom.right {
  transform: translate(var(--offset), var(--offset));
}

/* Based on libadwaita avatar colors */
/* https://gitlab.gnome.org/GNOME/libadwaita/-/blob/8c422b36bcc3efca6bbf63a3979bd53aededbdcd/src/stylesheet/widgets/_avatar.scss */
.color0 {
  color: #cfe1f5;
  background-image: linear-gradient(#83b6ec, #337fdc);
}

.color1 {
  color: #caeaf2;
  background-image: linear-gradient(#7ad9f1, #0f9ac8);
}

.color2 {
  color: #cef8d8;
  background-image: linear-gradient(#8de6b1, #29ae74);
}

.color3 {
  color: #e6f9d7;
  background-image: linear-gradient(#b5e98a, #6ab85b);
}

.color4 {
  color: #f9f4e1;
  background-image: linear-gradient(#f8e359, #d29d09);
}

.color5 {
  color: #ffead1;
  background-image: linear-gradient(#ffcb62, #d68400);
}

.color6 {
  color: #ffe5c5;
  background-image: linear-gradient(#ffa95a, #ed5b00);
}

.color7 {
  color: #f8d2ce;
  background-image: linear-gradient(#f78773, #e62d42);
}

.color8 {
  color: #fac7de;
  background-image: linear-gradient(#e973ab, #e33b6a);
}

.color9 {
  color: #e7c2e8;
  background-image: linear-gradient(#cb78d4, #9945b5);
}

.color10 {
  color: #d5d2f5;
  background-image: linear-gradient(#9e91e8, #7a59ca);
}

.color11 {
  color: #f2eade;
  background-image: linear-gradient(#e3cf9c, #b08952);
}

.color12 {
  color: #e5d6ca;
  background-image: linear-gradient(#be916d, #785336);
}

.color13 {
  color: #d8d7d3;
  background-image: linear-gradient(#c0bfbc, #6e6d71);
}

.gadget-controller {
  background-image: url('resource://de/haeckerfelix/Shortwave/assets/images/wood.png');
  background-size: cover;
  color: black;
}

/* Based on the styling from Pebbles by Subhadeep Jasu */
/* https://github.com/SubhadeepJasu/pebbles/blob/e8159b8e73f2ceb3597c8fe37fe338ba1fb6f50c/data/Application.css */
.gadget-controller-display {
  background-image: linear-gradient(#b6bfb6, #dae6da);
  border-radius: 12px;
  border: 1px solid black;
  padding-top: 3px;
  box-shadow: inset 0px 1px 8px 0px color-mix(in srgb, black 50%, transparent),
    inset 0px 0px 2px 1px color-mix(in srgb, black 50%, transparent),
    0px 1px 0px 0px color-mix(in srgb, black 30%, transparent),
    0px -1px 0px 0px color-mix(in srgb, black 15%, transparent);
}

.gadget-controller-button,
.gadget-controller-volume-button>button {
  background-image: url('resource://de/haeckerfelix/Shortwave/assets/images/metal.png');
  background-size: cover;
  color: black;
  border: 1px solid black;
}

.gadget-controller-volume-button>button {
  border-radius: 100%;
  padding: 0;
  min-width: 34px;
  min-height: 34px;
}

.map-pin {
  color: black;
}

.notice-row list {
  background: color-mix(in srgb, var(--accent-bg-color) 30%, transparent);
  font-weight: bold;
  box-shadow: none;
}

.error-row list {
  background: color-mix(in srgb, var(--error-color) 30%, transparent);
  font-weight: bold;
  box-shadow: none;
}

.station-grid {
  background: none;
  color: inherit;
}

.station-grid>child {
  margin: 6px;
  padding: 0px;
  background: none;
  border-radius: 12px;
}

.station-flowbox>flowboxchild {
  padding: 0px;
  border-radius: 12px;
}

.recording-indicator {
  min-height: 24px;
  font-size: x-small;
}

.recording-indicator.active {
  color: var(--light-1);
  background-color: var(--red-1);
}

.recording-indicator.active:hover {
  background-image: image(color-mix(in srgb, currentColor 10%, transparent));
}

.recording-indicator.active:active {
  background-image: image(RGB(0 0 6 / 20%));
}

volume>scale trough highlight {
  min-height: 12px;
  min-width: 12px;
}

volume>scale trough slider {
  opacity: 0;
}

entry.discover {
  border-radius: 999px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.card.discover {
  background-color: #fcd85e;
}

@media (prefers-color-scheme: dark) {
  .card.discover {
    background-color: #865e3c;
  }
}
