/* MARK: SCROLLBARS
*/
@layer reset {
  *::-webkit-scrollbar {
    display: block;
    width: 1rem;
  }

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

  *::-webkit-scrollbar-track {
    background-color: rgba(48, 190, 255, 0.0);
  }

  *::-webkit-scrollbar-track-piece {
    background-color: rgba(48, 190, 255, 0.0);
  }

  * {
    --scrollbar-color: rgba(48, 190, 255, 0.0);
  }

  *:hover,
  *:focus,
  *:focus-within {
    --scrollbar-color: rgba(var(--bg-accent-color), var(--bg-accent-opacity)) !important;
  }

  *::-webkit-scrollbar-thumb {
    background-color: rgba(48, 190, 255, 0.0);
    border: 5px solid transparent;
    border-radius: 1.5rem;
    box-shadow: 0.25rem 0 0 0.25rem var(--scrollbar-color) inset;
  }

  *::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-color);
    border: 0 solid transparent;
    box-shadow: none;
  }

  /* FIREFOX */
  /* Target elements, not :root{} */
  /* https://codeconvey.com/custom-scrollbar-css-for-all-browsers/ */
  section {
    /* Thumb and track color */
    scrollbar-color: rgba(48, 190, 255, 0.0) rgba(48, 190, 255, 0.0);
    /* Track width */
    scrollbar-width: thin;
  }

  section:hover {
    scrollbar-color: rgba(48, 190, 255, 0.3) rgba(48, 190, 255, 0.0);
  }
}