/*
BROWSER SUPPORTS
*/

.browser-support-item {
  color: #e30f3c
}

.browser-support-item::after {
  content: ' - нет'
}

@supports (offset-anchor: 20% 80%) {
  .support__offset-anchor {
    color: #299463
  }

  .support__offset-anchor::after {
    content: ' - ДА'
  }
}

@supports (offset-distance: 80%) {
  .support__offset-distance {
    color: #299463
  }

  .support__offset-distance::after {
    content: ' - ДА'
  }
}

@supports (offset-path: path('M0,0')) {
  .support__offset-path {
    color: #299463
  }

  .support__offset-path::after {
    content: ' - ДА'
  }
}

@supports (offset-position: 25% 75%) {
  .support__offset-position {
    color: #299463
  }

  .support__offset-position::after {
    content: ' - ДА'
  }
}

@supports (offset-rotate: 90deg) {
  .support__offset-rotate {
    color: #299463
  }

  .support__offset-rotate::after {
    content: ' - ДА'
  }
}

@supports (translate: 20px 50px) {
  .support__translate {
    color: #299463
  }

  .support__translate::after {
    content: ' - ДА'
  }
}

@supports (rotate: 30deg) {
  .support__rotate {
    color: #299463
  }

  .support__rotate::after {
    content: ' - ДА'
  }
}

@supports (scale: .85) {
  .support__scale {
    color: #299463
  }

  .support__scale::after {
    content: ' - ДА'
  }
}


@supports (scroll-snap-align: center) {
  .support__scroll-snap-align {
    color: #299463
  }

  .support__scroll-snap-align::after {
    content: ' - ДА'
  }
}

@supports (scroll-snap-stop: always) {
  .support__scroll-snap-stop {
    color: #299463
  }

  .support__scroll-snap-stop::after {
    content: ' - ДА'
  }
}

@supports (scroll-snap-type: x mandatory) {
  .support__scroll-snap-type {
    color: #299463
  }

  .support__scroll-snap-type::after {
    content: ' - ДА'
  }
}

@supports (scroll-margin: 10px) {
  .support__scroll-margin {
    color: #299463
  }

  .support__scroll-margin::after {
    content: ' - ДА'
  }
}

@supports (scroll-padding: 10px) {
  .support__scroll-padding {
    color: #299463
  }

  .support__scroll-padding::after {
    content: ' - ДА'
  }
}

@supports (position: sticky) {
  .support__sticky {
    color: #299463
  }

  .support__sticky::after {
    content: ' - ДА'
  }
}

@supports selector(:has(a, b)) {
  .support__has {
    color: #299463
  }

  .support__has::after {
    content: ' - ДА'
  }
}