/*
 * Barras de rolagem Diary.fm
 *
 * Toda rolagem visível herda este sistema. XP usa controles azuis/temáticos
 * mais definidos; Web 2.0 usa o acabamento metálico e discreto do Vista.
 * Novos componentes roláveis não devem declarar scrollbars próprias.
 */

body[data-theme],
html:has(body[data-theme]) {
  --diary-scroll-size: 17px;
  --diary-scroll-track: #f4f3ed;
  --diary-scroll-track-border: #aab9c8;
  --diary-scroll-thumb-light: #d9e8fb;
  --diary-scroll-thumb: #76aaf1;
  --diary-scroll-thumb-dark: #3d74be;
  --diary-scroll-grip: rgba(48,82,135,.72);
  --diary-scroll-button: #d2e1f6;
  --diary-scroll-button-hover: #e8f2ff;
  --diary-scroll-button-active: #b7d0f2;
  --diary-scroll-arrow: #305287;
  --diary-scroll-radius: 2px;
  scrollbar-color: var(--diary-scroll-thumb) var(--diary-scroll-track);
  scrollbar-width: auto;
}

body[data-theme="xp-clinical-bloom"],
body[data-theme="xp-aqua"][data-theme-variant="xp-clinical-bloom"],
html:has(body[data-theme="xp-clinical-bloom"]),
html:has(body[data-theme="xp-aqua"][data-theme-variant="xp-clinical-bloom"]) {
  --diary-scroll-track: #edf8fb;
  --diary-scroll-track-border: #9fcfdf;
  --diary-scroll-thumb-light: #d9f5fb;
  --diary-scroll-thumb: #6fc8e4;
  --diary-scroll-thumb-dark: #1f79ba;
  --diary-scroll-grip: rgba(31,121,186,.72);
  --diary-scroll-button: #ccecf5;
  --diary-scroll-button-hover: #e9faff;
  --diary-scroll-button-active: #a9dceb;
}

body[data-theme="xp-limewave"],
body[data-theme="xp-aqua"][data-theme-variant="xp-limewave"],
html:has(body[data-theme="xp-limewave"]),
html:has(body[data-theme="xp-aqua"][data-theme-variant="xp-limewave"]) {
  --diary-scroll-track: #f3f8ed;
  --diary-scroll-track-border: #b4cfad;
  --diary-scroll-thumb-light: #e4f5ce;
  --diary-scroll-thumb: #9adb5d;
  --diary-scroll-thumb-dark: #349b78;
  --diary-scroll-grip: rgba(45,109,89,.72);
  --diary-scroll-button: #d8edc2;
  --diary-scroll-button-hover: #eff9e5;
  --diary-scroll-button-active: #bddf9f;
}

body[data-theme^="web2-"],
html:has(body[data-theme^="web2-"]) {
  --diary-scroll-track: #f1f1f1;
  --diary-scroll-track-border: #c3c6ca;
  --diary-scroll-thumb-light: #fafafa;
  --diary-scroll-thumb: #d9dde3;
  --diary-scroll-thumb-dark: #a3a9b1;
  --diary-scroll-grip: rgba(91,97,104,.72);
  --diary-scroll-button: #e8e8e8;
  --diary-scroll-button-hover: #f7f7f7;
  --diary-scroll-button-active: #d2d2d2;
  --diary-scroll-arrow: #5b6168;
  --diary-scroll-radius: 1px;
}

body[data-theme="web2-citrus-pop"],
body[data-theme="web2-glossy"][data-theme-variant="web2-citrus-pop"],
html:has(body[data-theme="web2-citrus-pop"]),
html:has(body[data-theme="web2-glossy"][data-theme-variant="web2-citrus-pop"]) {
  --diary-scroll-track: #f5f2ed;
  --diary-scroll-track-border: #d7c5aa;
  --diary-scroll-thumb-light: #fffaf2;
  --diary-scroll-thumb: #ead8bd;
  --diary-scroll-thumb-dark: #c59a69;
  --diary-scroll-grip: rgba(143,94,52,.68);
  --diary-scroll-button: #eee3d3;
  --diary-scroll-button-hover: #fff8ec;
  --diary-scroll-button-active: #dfc7a6;
}

body[data-theme="web2-sky-signal"],
body[data-theme="web2-glossy"][data-theme-variant="web2-sky-signal"],
html:has(body[data-theme="web2-sky-signal"]),
html:has(body[data-theme="web2-glossy"][data-theme-variant="web2-sky-signal"]) {
  --diary-scroll-track: #eff4f6;
  --diary-scroll-track-border: #aacbd8;
  --diary-scroll-thumb-light: #f7fdff;
  --diary-scroll-thumb: #d0e8f0;
  --diary-scroll-thumb-dark: #83b6c8;
  --diary-scroll-grip: rgba(47,112,137,.68);
  --diary-scroll-button: #dcecf1;
  --diary-scroll-button-hover: #f2fcff;
  --diary-scroll-button-active: #bddce6;
}

body[data-theme] :is(.recommendations-scroller, .viewer-updates-scroll, .app-notifications-stack, *) {
  scrollbar-color: var(--diary-scroll-thumb) var(--diary-scroll-track);
  scrollbar-width: auto;
}

:is(html:has(body[data-theme]), body[data-theme])::-webkit-scrollbar,
body[data-theme] :is(.recommendations-scroller, .viewer-updates-scroll, .app-notifications-stack, *)::-webkit-scrollbar {
  width: var(--diary-scroll-size);
  height: var(--diary-scroll-size);
}

:is(html:has(body[data-theme]), body[data-theme])::-webkit-scrollbar-track,
body[data-theme] :is(.recommendations-scroller, .viewer-updates-scroll, .app-notifications-stack, *)::-webkit-scrollbar-track {
  border: 1px solid var(--diary-scroll-track-border);
  background: var(--diary-scroll-track);
  box-shadow:
    inset 1px 1px 3px color-mix(in srgb, var(--diary-scroll-thumb-dark) 34%, transparent),
    inset -1px -1px 0 rgba(255,255,255,.92);
}

:is(html:has(body[data-theme]), body[data-theme])::-webkit-scrollbar-thumb,
body[data-theme] :is(.recommendations-scroller, .viewer-updates-scroll, .app-notifications-stack, *)::-webkit-scrollbar-thumb {
  min-width: 42px;
  min-height: 42px;
  border: 1px solid var(--diary-scroll-thumb-dark);
  border-radius: var(--diary-scroll-radius);
  background-color: var(--diary-scroll-thumb);
  background-image:
    repeating-linear-gradient(180deg, rgba(255,255,255,.9) 0 1px, var(--diary-scroll-grip) 1px 2px, transparent 2px 4px),
    linear-gradient(90deg,
      var(--diary-scroll-thumb-light) 0%,
      color-mix(in srgb, var(--diary-scroll-thumb-light) 42%, var(--diary-scroll-thumb)) 19%,
      var(--diary-scroll-thumb) 39%,
      color-mix(in srgb, var(--diary-scroll-thumb-light) 72%, white) 54%,
      var(--diary-scroll-thumb) 70%,
      var(--diary-scroll-thumb-dark) 100%);
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: 8px 12px, 100% 100%;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.98),
    inset 2px 2px 2px rgba(255,255,255,.58),
    inset -1px -1px 0 var(--diary-scroll-thumb-dark),
    inset -2px -2px 2px color-mix(in srgb, var(--diary-scroll-thumb-dark) 44%, transparent),
    0 1px 1px color-mix(in srgb, var(--diary-scroll-thumb-dark) 28%, transparent);
}

body[data-theme] :is(.recommendations-scroller, .diary-scroll-horizontal)::-webkit-scrollbar-thumb {
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.9) 0 1px, var(--diary-scroll-grip) 1px 2px, transparent 2px 4px),
    linear-gradient(180deg,
      var(--diary-scroll-thumb-light) 0%,
      color-mix(in srgb, var(--diary-scroll-thumb-light) 42%, var(--diary-scroll-thumb)) 19%,
      var(--diary-scroll-thumb) 39%,
      color-mix(in srgb, var(--diary-scroll-thumb-light) 72%, white) 54%,
      var(--diary-scroll-thumb) 70%,
      var(--diary-scroll-thumb-dark) 100%);
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: 12px 8px, 100% 100%;
}

:is(html:has(body[data-theme]), body[data-theme])::-webkit-scrollbar-thumb:hover,
body[data-theme] :is(.recommendations-scroller, .viewer-updates-scroll, .app-notifications-stack, *)::-webkit-scrollbar-thumb:hover {
  border-color: var(--diary-scroll-arrow);
  filter: saturate(1.08) brightness(1.04);
}

:is(html:has(body[data-theme]), body[data-theme])::-webkit-scrollbar-thumb:active,
body[data-theme] :is(.recommendations-scroller, .viewer-updates-scroll, .app-notifications-stack, *)::-webkit-scrollbar-thumb:active {
  filter: saturate(1.12) brightness(.94);
  box-shadow: inset 1px 2px 3px color-mix(in srgb, var(--diary-scroll-thumb-dark) 36%, transparent);
}

:is(html:has(body[data-theme]), body[data-theme])::-webkit-scrollbar-button,
body[data-theme] :is(.recommendations-scroller, .viewer-updates-scroll, .app-notifications-stack, *)::-webkit-scrollbar-button {
  display: block;
  width: var(--diary-scroll-size);
  height: var(--diary-scroll-size);
  border: 1px solid var(--diary-scroll-track-border);
  background-color: var(--diary-scroll-button);
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.98),
    inset 2px 2px 2px rgba(255,255,255,.48),
    inset -1px -1px 0 var(--diary-scroll-thumb-dark),
    inset -2px -2px 2px color-mix(in srgb, var(--diary-scroll-thumb-dark) 30%, transparent);
}

:is(html:has(body[data-theme]), body[data-theme])::-webkit-scrollbar-button:hover,
body[data-theme] :is(.recommendations-scroller, .viewer-updates-scroll, .app-notifications-stack, *)::-webkit-scrollbar-button:hover {
  background-color: var(--diary-scroll-button-hover);
  border-color: var(--diary-scroll-thumb-dark);
  filter: saturate(1.08) brightness(1.06);
}

:is(html:has(body[data-theme]), body[data-theme])::-webkit-scrollbar-button:active,
body[data-theme] :is(.recommendations-scroller, .viewer-updates-scroll, .app-notifications-stack, *)::-webkit-scrollbar-button:active {
  background-color: var(--diary-scroll-button-active);
  filter: saturate(1.06) brightness(.94);
  box-shadow:
    inset 1px 1px 3px color-mix(in srgb, var(--diary-scroll-thumb-dark) 52%, transparent),
    inset -1px -1px 0 rgba(255,255,255,.72);
}

:is(html:has(body[data-theme]), body[data-theme])::-webkit-scrollbar-button:vertical:decrement,
body[data-theme] :is(.recommendations-scroller, .viewer-updates-scroll, .app-notifications-stack, *)::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='m3 8 3.5-4L10 8z' fill='%23305287'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(255,255,255,.98), var(--diary-scroll-button) 48%, color-mix(in srgb, var(--diary-scroll-button-active) 76%, var(--diary-scroll-thumb-dark)));
}

:is(html:has(body[data-theme]), body[data-theme])::-webkit-scrollbar-button:vertical:increment,
body[data-theme] :is(.recommendations-scroller, .viewer-updates-scroll, .app-notifications-stack, *)::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='m3 5 3.5 4L10 5z' fill='%23305287'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(255,255,255,.98), var(--diary-scroll-button) 48%, color-mix(in srgb, var(--diary-scroll-button-active) 76%, var(--diary-scroll-thumb-dark)));
}

:is(html:has(body[data-theme]), body[data-theme])::-webkit-scrollbar-button:horizontal:decrement,
body[data-theme] :is(.recommendations-scroller, .viewer-updates-scroll, .app-notifications-stack, *)::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='m8 3-4 3.5L8 10z' fill='%23305287'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(255,255,255,.98), var(--diary-scroll-button) 48%, color-mix(in srgb, var(--diary-scroll-button-active) 76%, var(--diary-scroll-thumb-dark)));
}

:is(html:has(body[data-theme]), body[data-theme])::-webkit-scrollbar-button:horizontal:increment,
body[data-theme] :is(.recommendations-scroller, .viewer-updates-scroll, .app-notifications-stack, *)::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='m5 3 4 3.5L5 10z' fill='%23305287'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(255,255,255,.98), var(--diary-scroll-button) 48%, color-mix(in srgb, var(--diary-scroll-button-active) 76%, var(--diary-scroll-thumb-dark)));
}

:is(html:has(body[data-theme^="web2-"]), body[data-theme^="web2-"])::-webkit-scrollbar-button:vertical:decrement,
body[data-theme^="web2-"] :is(.recommendations-scroller, .viewer-updates-scroll, .app-notifications-stack, *)::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='m3 8 3.5-4L10 8z' fill='%235b6168'/%3E%3C/svg%3E"), linear-gradient(180deg, #fff, var(--diary-scroll-button) 48%, color-mix(in srgb, var(--diary-scroll-button-active) 82%, #9da3aa));
}

:is(html:has(body[data-theme^="web2-"]), body[data-theme^="web2-"])::-webkit-scrollbar-button:vertical:increment,
body[data-theme^="web2-"] :is(.recommendations-scroller, .viewer-updates-scroll, .app-notifications-stack, *)::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='m3 5 3.5 4L10 5z' fill='%235b6168'/%3E%3C/svg%3E"), linear-gradient(180deg, #fff, var(--diary-scroll-button) 48%, color-mix(in srgb, var(--diary-scroll-button-active) 82%, #9da3aa));
}

:is(html:has(body[data-theme^="web2-"]), body[data-theme^="web2-"])::-webkit-scrollbar-button:horizontal:decrement,
body[data-theme^="web2-"] :is(.recommendations-scroller, .viewer-updates-scroll, .app-notifications-stack, *)::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='m8 3-4 3.5L8 10z' fill='%235b6168'/%3E%3C/svg%3E"), linear-gradient(180deg, #fff, var(--diary-scroll-button) 48%, color-mix(in srgb, var(--diary-scroll-button-active) 82%, #9da3aa));
}

:is(html:has(body[data-theme^="web2-"]), body[data-theme^="web2-"])::-webkit-scrollbar-button:horizontal:increment,
body[data-theme^="web2-"] :is(.recommendations-scroller, .viewer-updates-scroll, .app-notifications-stack, *)::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='m5 3 4 3.5L5 10z' fill='%235b6168'/%3E%3C/svg%3E"), linear-gradient(180deg, #fff, var(--diary-scroll-button) 48%, color-mix(in srgb, var(--diary-scroll-button-active) 82%, #9da3aa));
}

:is(html:has(body[data-theme]), body[data-theme])::-webkit-scrollbar-corner,
body[data-theme] :is(.recommendations-scroller, .viewer-updates-scroll, .app-notifications-stack, *)::-webkit-scrollbar-corner {
  border: 1px solid var(--diary-scroll-track-border);
  background: var(--diary-scroll-track);
}

@media (prefers-reduced-motion: reduce) {
  :is(html:has(body[data-theme]), body[data-theme])::-webkit-scrollbar-thumb,
  body[data-theme] :is(.recommendations-scroller, .viewer-updates-scroll, .app-notifications-stack, *)::-webkit-scrollbar-thumb {
    transition: none;
  }
}