@use "./variables" as *;

// Контейнер
@mixin container {
  max-width: $container-max-width;
  margin: 0 auto;
  padding: 0 $container-padding;
}

// Медиа-запросы
@mixin media($breakpoint) {
  @if $breakpoint == sm {
    @media (min-width: $breakpoint-sm) {
      @content;
    }
  }
  @if $breakpoint == md {
    @media (min-width: $breakpoint-md) {
      @content;
    }
  }
  @if $breakpoint == lg {
    @media (min-width: $breakpoint-lg) {
      @content;
    }
  }
  @if $breakpoint == xl {
    @media (min-width: $breakpoint-xl) {
      @content;
    }
  }
  @if $breakpoint == 2xl {
    @media (min-width: $breakpoint-2xl) {
      @content;
    }
  }
}

// Флексбокс
@mixin flex(
  $direction: row,
  $justify: flex-start,
  $align: stretch,
  $wrap: nowrap
) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

// Центрирование
@mixin center($type: both) {
  position: absolute;

  @if $type == both {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  @if $type == horizontal {
    left: 50%;
    transform: translateX(-50%);
  }
  @if $type == vertical {
    top: 50%;
    transform: translateY(-50%);
  }
}

// Скрытие текста
@mixin 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;
}

// Кнопка сброса
@mixin button-reset {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;

  &:focus-visible {
    outline: 2px solid $primary;
    outline-offset: 2px;
  }
}

// Ссылка сброса
@mixin link-reset {
  color: inherit;
  text-decoration: none;

  &:hover,
  &:focus {
    text-decoration: none;
  }
}

// Грид
@mixin grid($columns: 1, $gap: 1rem) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gap;
}

// Обрезка текста
@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Многострочное обрезание
@mixin text-clamp($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
