/* Shared Snap Sub scrollbar treatment. Keep native scrolling and contrast modes. */
@media (forced-colors: none) {
  html,
  #app :is(.settings-card, .board-card, #board-list) {
    scrollbar-color: #ff793c #051226;
    scrollbar-width: auto;
  }

  /* Use rounded thumbs where WebKit-style scrollbar parts are supported. */
  @supports selector(::-webkit-scrollbar) {
    html,
    #app :is(.settings-card, .board-card, #board-list) {
      scrollbar-color: auto;
      scrollbar-width: auto;
    }

    *::-webkit-scrollbar,
    #app :is(.settings-card, .board-card, #board-list)::-webkit-scrollbar {
      width: 12px;
      height: 12px;
    }

    *::-webkit-scrollbar-track,
    *::-webkit-scrollbar-corner,
    #app :is(.settings-card, .board-card, #board-list)::-webkit-scrollbar-track,
    #app :is(.settings-card, .board-card, #board-list)::-webkit-scrollbar-corner {
      background: #051226;
    }

    *::-webkit-scrollbar-thumb,
    #app :is(.settings-card, .board-card, #board-list)::-webkit-scrollbar-thumb {
      min-height: 36px;
      border: 3px solid #051226;
      border-radius: 999px;
      background: #ff793c;
      background-clip: padding-box;
    }

    *::-webkit-scrollbar-thumb:hover,
    #app :is(.settings-card, .board-card, #board-list)::-webkit-scrollbar-thumb:hover {
      background-color: #ff9a6b;
    }

    *::-webkit-scrollbar-thumb:active,
    #app :is(.settings-card, .board-card, #board-list)::-webkit-scrollbar-thumb:active {
      background-color: #ffb28e;
    }

    *::-webkit-scrollbar-button {
      display: none;
    }
  }
}

/* Let operating-system contrast settings control every native scrollbar. */
@media (forced-colors: active) {
  html,
  #app :is(.settings-card, .board-card, #board-list) {
    scrollbar-color: auto;
    scrollbar-width: auto;
  }

  #app :is(.settings-card, .board-card, #board-list)::-webkit-scrollbar,
  #app :is(.settings-card, .board-card, #board-list)::-webkit-scrollbar-track,
  #app :is(.settings-card, .board-card, #board-list)::-webkit-scrollbar-thumb,
  #app :is(.settings-card, .board-card, #board-list)::-webkit-scrollbar-thumb:hover {
    all: revert;
  }
}