/* Media features */
@media (prefers-reduced-motion) {
  :root {
    --animation-duration: 0;
  }
}

@media screen and (pointer: coarse) {
  :root {
    --button-padding: 1rem;
  }
}

/* Spacing classes */

/* Margin */
.m-0 {
  margin: 0 !important;
}
.mt-0 {
  margin-top: 0 !important;
}
.mr-0 {
  margin-right: 0 !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.ml-0 {
  margin-left: 0 !important;
}

/* Padding */
.p-0 {
  padding: 0 !important;
}
.pt-0 {
  padding-top: 0 !important;
}
.pr-0 {
  padding-right: 0 !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.pl-0 {
  padding-left: 0 !important;
}

/* Text truncation */
.text-truncation__clip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.text-truncation__ellipsis-singleline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-truncation__ellipsis-multiline {
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-clamp: 4; /* can be overwritten by user if needed */
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.styled-scrollbar {
  &::-webkit-scrollbar {
    -webkit-appearance: none;
    width: var(--scrollbar-scrollbar-width, 4px);
  }

  &::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track-fill, hsl(0, 0%, 91%))
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: var(--scrollbar-thumb-fill, hsl(0, 0%, 20%));
    border-radius: 
      var(--scrollbar-thumb-border-radius-top-left, 999px)
      var(--scrollbar-thumb-border-radius-top-right, 999px)
      var(--scrollbar-thumb-border-radius-bottom-right, 999px)
      var(--scrollbar-thumb-border-radius-bottom-left, 999px);
  }
}