@use 'styles/tokens' as *;

@forward 'include-media' with (
  $breakpoints: (
    xs: $breakpoint-xs,
    s: $breakpoint-s,
    m: $breakpoint-m,
    l: $breakpoint-l,
    xl: $breakpoint-xl,
  ),
  $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;
}