@use 'vars' as *;
@use '../mixins' as *;

html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: $scrollbar-thumb transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background-color: $scrollbar-thumb;
  border-radius: 4px;

  &:hover {
    background-color: $scrollbar-thumb--hover;
  }
}

body {
  font-family: $default-font-family, system-ui, sans-serif;
  color: $body-text;
  background-color: $body-bg;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  background-color: $main-bg;
}

a {
  color: $link-text;
  text-decoration: none;
}

button {
  @include from-br(sm) {
    cursor: pointer;
  }
}

summary {
  all: unset;
  display: block;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

#anchor {
  scroll-margin-top: var(--header-height);

  @include from-br(sm) {
    $subheader-height: 59px;

    scroll-margin-top: calc(var(--header-height) + #{$subheader-height});
  }
}

/* спрятать элемент для сохранения доступности */
._visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
  clip-path: inset(100%);
}

._hidden {
  display: none !important;
}

@for $i from 1 through 12 {
  ._mb-#{$i * 2} {
    margin-bottom: #{$i * 2}px;
  }

  ._mt-#{$i * 2} {
    margin-top: #{$i * 2}px;
  }
}