/* Settings app overrides */

/* =====================================================================
   Wallpaper pickers
   ===================================================================== */

/* Same framing Finder gives a leaf image (.finder-icon img.finder-thumb in
   css/finder.css — its wallpapers and photos carry it, its folders never do),
   duplicated here rather than shared so neither app owns the other's
   stylesheet. Needs `.settings-btn img` beaten on size, hence the two-class
   selector, and `image-rendering` put back to auto because these are
   photographs rather than pixel icons. */
.settings-btn img.settings-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
  background: #fff;
  image-rendering: auto;
}

/* wallpaper0 is a 2KB flat fill, so at this size it is just a coloured square.
   Draining it at least signals the grayscale effect the label promises. */
.settings-btn img.settings-thumb-classic {
  filter: grayscale(1);
}

/* The picker is a panel, not a control, so it does not take the button's
   pressed state or pointer. Its arrows do. */
.wallpaper-picker {
  cursor: default;
}

.wallpaper-picker:active {
  border-style: outset;
  background: var(--panel-light);
}

.wallpaper-picker-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.wp-arrow {
  flex-shrink: 0;
  padding: 6px 5px;
  background: #e0e0e0;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.9);
  font-family: "VT323", monospace;
  font-size: 14px;
  line-height: 1;
  color: #000;
  cursor: pointer;
}

/* Travels into its own shadow when pressed, the same idiom as .music-btn. */
.wp-arrow:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.custom-upload-btn {
  display: inline-flex;
  width: auto;
  min-width: 150px;
  padding: 10px 18px;
  background: #e0e0e0;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.9);
  color: #000;
}

.custom-upload-btn:active {
  background: #d4d4d4;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.9);
}