@use './colors';

/**
 * Скрывает полосы прокрутки у элемента.
 */
@mixin hidden-scrollbars {
  scrollbar-width: none; // Firefox
  overflow: -moz-scrollbars-none; // old Firefox
  -ms-overflow-style: none; // IE, old Edge
  &::-webkit-scrollbar {
    display: none; // Chrome, Safari, Opera
  }
}

/**
 * стилизует полосы прокрутки по дизайн-гайдам с ограничениями:
 * - в браузерах на основе webkit/blink (Chrome, Opera, Safari) полоса прокрутки не накладывается поверх контента
 * - в браузерах которые поддерживают только стандартизированный способ стилизации (Firefox) определяет только цвет ползунка
 */
@mixin semi-stylized-scrollbars($bg-color: #fff) {
  // firefox
  scrollbar-width: thin;
  scrollbar-color: colors.$basic-gray12 transparent;

  // webkit
  &::-webkit-scrollbar {
    width: 12px;
  }
  &::-webkit-scrollbar-track {
    background: $bg-color;
    border-radius: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border: 4px solid $bg-color;
    border-radius: 12px;
    background: colors.$basic-gray12;
  }
}

/**
 * Полный сброс стилей button до состояния сравнимого с div.
 * взято отсюда: https://gist.github.com/MoOx/9137295
 */
@mixin reset-button {
  outline: none;
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;

  background: transparent;

  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;

  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
  line-height: normal;

  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;

  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none;

  /* Remove excess padding and border in Firefox 4+ */
  &::-moz-focus-inner {
    border: 0;
    padding: 0;
  }
}

/**
 * Добавляет стандартную визуальную подсветку состояния focus-visible.
 */
@mixin focus-visible-style() {
  outline: 2px solid colors.$basic-blue;
}

/**
 * Формирует стандартную визуальную подсветку для состояния focus-visible.
 */
@mixin focus-visible() {
  &:focus-visible {
    @include focus-visible-style;
  }
}