button.large {
  min-width: 48px;
  min-height: 48px;
}

.main-box {
  padding: 6px;
  margin-left: 12px;
  margin-right: 12px;
}

songcover {
  padding-bottom: 24px;
}

songcover picture.cover,
songcover image.card {
  box-shadow: 0px 1px 6px rgba(0,0,0,0.3),
              0px 2px 12px rgba(0,0,0,0.15),
              0px 6px 32px rgba(0,0,0,0.1);
  border-radius: 12px;
  margin: 6px;
}

.main-window > overlay-split-view > .sidebar-pane {
  background: transparent;
}

.main-window songcover picture.cover {
  background: linear-gradient(to bottom, @background_color_0, @background_color_1);
}

songdetails {
  padding-top: 12px;
  padding-bottom: 24px;
}

songdetails label.song-title {
  /* match title-1 */
  font-size: 15pt;
  font-weight: 800;
  padding-left: 12px;
  padding-right: 12px;
}

songdetails label.song-title,
songdetails label.song-artist,
songdetails label.song-album {
  min-height: 1.5em;
}

waveformview {
  padding-bottom: 6px;
}

playbackcontrol {
  padding-bottom: 12px;
}

queuerow .currently-playing {
  padding-left: 6px;
  font-weight: 700;
}

queuerow box.song-details {
  padding: 6px 0;
  border-spacing: 12px;
}

queuerow label.song-title {
  font-weight: 700;
  font-size: 85%;
}

queuerow label.song-artist {
  font-size: 85%;
}

queuerow picture.cover,
queuerow image.card {
  box-shadow: none;
  border-radius: 4px;
  margin: 0px;
}

queuerow checkbutton.selection-mode {
  padding-right: 12px;
  padding-left: 8px;
}

.queue-length {
  padding: 9px 12px;
}

dragoverlay {
  box-shadow: none;
}

.drag-overlay-status-page {
  background-color: color-mix(in srgb, @window_fg_color 50%, transparent);
  color: var(--accent_fg_color);
  padding: 32px;
}

.blurred {
  filter: blur(6px);
}

.main-window {
  background: linear-gradient(127deg, color-mix(in srgb, @background_color_0 55%, transparent), color-mix(in srgb, @background_color_0 0%, transparent) 70.71%),
              linear-gradient(217deg, color-mix(in srgb, @background_color_1 55%, transparent), color-mix(in srgb, @background_color_1 0%, transparent) 70.71%),
              linear-gradient(336deg, color-mix(in srgb, @background_color_2 55%, transparent), color-mix(in srgb, @background_color_2 0%, transparent) 70.71%);
  transition-property: background;
  transition-duration: 250ms;
  transition-timing-function: ease;
}

.darken {
  background-color: rgba(0, 0, 0, 0.08);
}

.main-window > overlay-split-view > widget.background > playlistview {
  background: linear-gradient(127deg, color-mix(in srgb, @background_color_0 55%, transparent), color-mix(in srgb, @background_color_0 0%, transparent) 70.71%),
              linear-gradient(217deg, color-mix(in srgb, @background_color_1 55%, transparent), color-mix(in srgb, @background_color_1 0%, transparent) 70.71%),
              linear-gradient(336deg, color-mix(in srgb, @background_color_2 55%, transparent), color-mix(in srgb, @background_color_2 0%, transparent) 70.71%),
              @window_bg_color;
  transition-property: background;
  transition-duration: 250ms;
  transition-timing-function: ease;
}

.main-window button:focus:focus-visible,
.main-window row:focus:focus-visible,
.main-window scale:focus:focus-visible > trough,
.main-window searchbar entry.search {
  outline-color: color-mix(in srgb, currentColor 25%, transparent);
}

.main-window scale highlight,
.main-window progressbar progress {
  background: currentColor;
  color: inherit;
}

volume > scale { color: color-mix(in srgb, currentColor 55%, transparent); }

volume:hover > scale { color: inherit; }

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

volume > scale trough slider { opacity: 0; }
