style-forge.media/src/mobile/scroll.css

Style-Forge.Media: comprehensive CSS media query helpers for responsive web design.

@media only screen and (max-width: 600px) {
  .\@mob\:sb\:a { scroll-behavior: auto }
  .\@mob\:sb\:s { scroll-behavior: smooth }

  .\@mob\:sst\:n { scroll-snap-type: none }
  .\@mob\:sst\:x { scroll-snap-type: x mandatory }
  .\@mob\:sst\:y { scroll-snap-type: y mandatory }
  .\@mob\:sst\:b { scroll-snap-type: block mandatory }
  .\@mob\:sst\:in { scroll-snap-type: inline mandatory }
  .\@mob\:sst\:x\:p { scroll-snap-type: x proximity }
  .\@mob\:sst\:y\:p { scroll-snap-type: y proximity }
  .\@mob\:sst\:b\:p { scroll-snap-type: block proximity }
  .\@mob\:sst\:in\:p { scroll-snap-type: inline proximity }

  .\@mob\:ssa\:s { scroll-snap-align: start }
  .\@mob\:ssa\:e { scroll-snap-align: end }
  .\@mob\:ssa\:c { scroll-snap-align: center }
  .\@mob\:ssa\:none { scroll-snap-align: none }

  .\@mob\:sp { scroll-padding: var(--sf-rem) }
  .\@mob\:sp\:0 { scroll-padding: 0 }
  .\@mob\:sp\:xs { scroll-padding: var(--sf-rem-xs) }
  .\@mob\:sp\:sm { scroll-padding: var(--sf-rem-sm) }
  .\@mob\:sp\:s { scroll-padding: var(--sf-rem-s) }
  .\@mob\:sp\:ms { scroll-padding: var(--sf-rem-ms) }
  .\@mob\:sp\:ls { scroll-padding: var(--sf-rem-ls) }
  .\@mob\:sp\:md { scroll-padding: var(--sf-rem-md) }
  .\@mob\:sp\:lg { scroll-padding: var(--sf-rem-lg) }
  .\@mob\:sp\:xl { scroll-padding: var(--sf-rem-xl) }

  .\@mob\:sp\:t { scroll-padding-top: var(--sf-rem) }
  .\@mob\:sp\:r { scroll-padding-right: var(--sf-rem) }
  .\@mob\:sp\:b { scroll-padding-bottom: var(--sf-rem) }
  .\@mob\:sp\:l { scroll-padding-left: var(--sf-rem) }

  .\@mob\:sm { scroll-margin: var(--sf-rem) }
  .\@mob\:sm\:0 { scroll-margin: 0 }
  .\@mob\:sm\:xs { scroll-margin: var(--sf-rem-xs) }
  .\@mob\:sm\:sm { scroll-margin: var(--sf-rem-sm) }
  .\@mob\:sm\:s { scroll-margin: var(--sf-rem-s) }
  .\@mob\:sm\:ms { scroll-margin: var(--sf-rem-ms) }
  .\@mob\:sm\:ls { scroll-margin: var(--sf-rem-ls) }
  .\@mob\:sm\:md { scroll-margin: var(--sf-rem-md) }
  .\@mob\:sm\:lg { scroll-margin: var(--sf-rem-lg) }
  .\@mob\:sm\:xl { scroll-margin: var(--sf-rem-xl) }

  .\@mob\:sm\:t { scroll-margin-top: var(--sf-rem) }
  .\@mob\:sm\:r { scroll-margin-right: var(--sf-rem) }
  .\@mob\:sm\:b { scroll-margin-bottom: var(--sf-rem) }
  .\@mob\:sm\:l { scroll-margin-left: var(--sf-rem) }

  .\@mob\:ov { overflow: auto }
  .\@mob\:ov\:h { overflow: hidden }
  .\@mob\:ov\:s { overflow: scroll }
  .\@mob\:ov\:v { overflow: visible }

  .\@mob\:ov\:x { overflow-x: auto }
  .\@mob\:ov\:x\:h, .\@mob\:ov\:h\:x { overflow-x: hidden }
  .\@mob\:ov\:x\:s, .\@mob\:ov\:s\:x { overflow-x: scroll }
  .\@mob\:ov\:x\:v, .\@mob\:ov\:v\:x { overflow-x: visible }

  .\@mob\:ov\:y { overflow-y: auto }
  .\@mob\:ov\:y\:h, .\@mob\:ov\:h\:y { overflow-y: hidden }
  .\@mob\:ov\:y\:s, .\@mob\:ov\:s\:y { overflow-y: scroll }
  .\@mob\:ov\:y\:v, .\@mob\:ov\:v\:y { overflow-y: visible }

  .\@mob\:osb\:a { overscroll-behavior: auto }
  .\@mob\:osb\:c { overscroll-behavior: contain }
  .\@mob\:osb\:n { overscroll-behavior: none }

  .\@mob\:osb\:x\:a { overscroll-behavior-x: auto }
  .\@mob\:osb\:x\:c { overscroll-behavior-x: contain }
  .\@mob\:osb\:x\:n { overscroll-behavior-x: none }

  .\@mob\:osb\:y\:a { overscroll-behavior-y: auto }
  .\@mob\:osb\:y\:c { overscroll-behavior-y: contain }
  .\@mob\:osb\:y\:n { overscroll-behavior-y: none }

  .\@mob\:sb\:w\:sm { scrollbar-width: thin }
  .\@mob\:sb\:w\:md { scrollbar-width: auto }
  .\@mob\:sb\:w\:none { scrollbar-width: none }

  .\@mob\:sb\:c\:t { scrollbar-color: transparent }
  .\@mob\:sb\:c\:d { scrollbar-color: dark }
  .\@mob\:sb\:c\:l { scrollbar-color: light }

  /* /// */

  html.var .\@mob\:sp { scroll-padding: 16px }
  html.var .\@mob\:sp\:0 { scroll-padding: 0 }
  html.var .\@mob\:sp\:xs { scroll-padding: 4px }
  html.var .\@mob\:sp\:sm { scroll-padding: 8px }
  html.var .\@mob\:sp\:s { scroll-padding: 10px }
  html.var .\@mob\:sp\:ms { scroll-padding: 12px }
  html.var .\@mob\:sp\:ls { scroll-padding: 14px }
  html.var .\@mob\:sp\:md { scroll-padding: 16px }
  html.var .\@mob\:sp\:lg { scroll-padding: 18px }
  html.var .\@mob\:sp\:xl { scroll-padding: 20px }

  html.var .\@mob\:sp\:t { scroll-padding-top: 16px }
  html.var .\@mob\:sp\:r { scroll-padding-right: 16px }
  html.var .\@mob\:sp\:b { scroll-padding-bottom: 16px }
  html.var .\@mob\:sp\:l { scroll-padding-left: 16px }

  html.var .\@mob\:sm { scroll-margin: 16px }
  html.var .\@mob\:sm\:0 { scroll-margin: 0 }
  html.var .\@mob\:sm\:xs { scroll-margin: 4px }
  html.var .\@mob\:sm\:sm { scroll-margin: 8px }
  html.var .\@mob\:sm\:s { scroll-margin: 10px }
  html.var .\@mob\:sm\:ms { scroll-margin: 12px }
  html.var .\@mob\:sm\:ls { scroll-margin: 14px }
  html.var .\@mob\:sm\:md { scroll-margin: 16px }
  html.var .\@mob\:sm\:lg { scroll-margin: 18px }
  html.var .\@mob\:sm\:xl { scroll-margin: 20px }

  html.var .\@mob\:sm\:t { scroll-margin-top: 16px }
  html.var .\@mob\:sm\:r { scroll-margin-right: 16px }
  html.var .\@mob\:sm\:b { scroll-margin-bottom: 16px }
  html.var .\@mob\:sm\:l { scroll-margin-left: 16px }
}