/* ============================================
   NO SCROLLBARS - GLOBAL SETTINGS
   ============================================ */

/* Firefox */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}

::-webkit-scrollbar-track {
  display: none;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  display: none;
  background: transparent;
}

::-webkit-scrollbar-corner {
  display: none;
  background: transparent;
}

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

/* ============================================
   SCROLLING BEHAVIOR
   ============================================ */

html {
  overflow: auto;
  scroll-behavior: smooth;
}

body {
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  width: 100%;
}

/* ============================================
   EXCEPTIONS - Elements that need scrollbars
   ============================================ */

/* Form inputs should keep their scrollbars for usability */
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select {
  scrollbar-width: thin !important;
  -ms-overflow-style: auto !important;
}

/* ============================================
   MOBILE OPTIMIZATION
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  html {
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   FIREFOX SPECIFIC
   ============================================ */

@-moz-document url-prefix() {
  body {
    scrollbar-width: none;
  }
  
  * {
    scrollbar-color: transparent transparent;
  }
}