@import 'include-media';

$breakpoints: (
  xs: 480px,
  s: 768px,
  m: 992px,
  l: 1200px,
  xl: 1400px,
);

$media-expressions: (
  touch: '(hover: none)',
);

@mixin scrollbars {
  scrollbar-color: var(--scrollbar--thumb--color) var(--scrollbar--thumb--track);
  scrollbar-width: thin;

  &::-webkit-scrollbar {
    width: var(--scrollbar--size);
    background-color: var(--scrollbar--track--color);
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar--thumb--color);
  }

  &:hover {
    scrollbar-color: var(--scrollbar--thumb--color--highlight) var(--scrollbar--track--color);

    &::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar--thumb--color--highlight);
    }
  }
}

/**
 * It does not work when applied on input elements.
 */
@mixin focus-effect {
  --focus-effect--size: 6px;

  position: relative;

  &::after {
    position: absolute;
    inset: 0;
    z-index: var(--z-index--focus-effect);
    transition: var(--transition);
    border-radius: var(--border--radius);
    box-shadow: 0 0 0 var(--focus-effect--size) transparent;
    pointer-events: none;
  }

  &:focus-within {
    &,
    * {
      outline: none;
    }

    &::after {
      content: '';
      box-shadow: 0 0 0 var(--focus-effect--size) var(--color--focus);
    }
  }
}

@mixin disabled {
  opacity: var(--opacity--disabled);
  box-shadow: none;
  cursor: not-allowed;
}

@mixin ellipsis {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

@mixin button-reset {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
}

@mixin list-reset {
  padding: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  list-style-type: none;
}

@mixin text-input {
  width: 100%;
  height: var(--text-input--height);
  padding: 0 var(--spacing--l);
  transition: var(--transition);
  font-size: var(--font--size--m);
  outline: none;
}

@mixin text-stroke($color, $size: 1px) {
  text-shadow:
    $size 0 $color,
    (-$size) 0 $color,
    0 $size $color,
    0 (-$size) $color,
    (-$size) (-$size) $color,
    (-$size) $size $color,
    $size (-$size) $color,
    $size $size $color;
}