// ===========================================
// 🎨 Mixins Library
// ===========================================


// -------------------------------------------
// 🔤 Ellipsis (Multi-line Text Truncation)
// Usage: @include ellipsis(3);
// -------------------------------------------

@mixin ellipsis($lines) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}



// -------------------------------------------
// 🧭 Swiper Navigation Arrows
// Usage: @include slider-nav-1(30px, 30px, 20px, 20px, "prev.svg", "next.svg");
// -------------------------------------------

@mixin slider-nav-1($width, $height, $left-offset, $right-offset, $prev-bg, $next-bg) {

  .swiper-button-prev,
  .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: $width;
    height: $height;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: 0.3s ease-in-out;

    @media screen and (max-width: 991px) {
      display: none;
    }
  }

  .swiper-button-prev {
    left: $left-offset;
    background-image: url("../images/icons/#{$prev-bg}");
  }

  .swiper-button-next {
    right: $right-offset;
    background-image: url("../images/icons/#{$next-bg}");
  }
}



// -------------------------------------------
// 🔘 Swiper Pagination Dots
// Usage: @include slider-dots(12px, 12px, 15px, 50%, $white, $primary-01);
// -------------------------------------------

@mixin slider-dots($width, $height, $bottom-offset, $border-radius, $bg-default, $bg-active) {

  .swiper-pagination {
    position: absolute;
    left: 50%;
    bottom: $bottom-offset;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;

    .swiper-pagination-bullet {
      width: $width;
      height: $height;
      background-color: $bg-default;
      border-radius: $border-radius;
      opacity: 1;
      margin-right: 6px;
      cursor: pointer;

      &.swiper-pagination-bullet-active {
        background-color: $bg-active;
      }
    }
  }
}

// -------------------------------------------
// 🔤 Ellipsis (Text Font Sizes)
// Usage: @include font-size(18, 28, 700, #333); // size=18px, lh=28px, weight=700, color=#333
// Usage: @include font-size(14, null, 400, red); // size=14px, auto lh, weight=400, color=red
// Usage: @include font-size(20); // size=20px, auto lh, default weight, default color
// -------------------------------------------

@mixin font-size($size, $line-height: null, $weight: null, $color: null) {
  @if $size >= 0 and $size <= 200 {
    font-size: #{$size}px;

    // If custom line-height is given, use it
    @if $line-height != null {
      line-height: #{$line-height}px;
    } @else {
      line-height: #{$size + 6}px; // Default line-height
    }

  } @else {
    @warn "Unsupported font size: #{$size}px (must be between 0px and 200px)";
  }

  @if $weight != null {
    font-weight: $weight;
  }

  @if $color != null {
    color: $color;
  }
}


// -------------------------------------------
// 🔘 Circle Loader
// Usage: .circle-loader {
//            @include circle-loader();
//          }
// Usage: .circle-loader {
//            @include circle-loader(30px, 3px, #ddd, #FF4557, 1s);
//          }
// -------------------------------------------
// === Loader Mixin ===
@mixin circle-loader(
  $size: 18px,
  $border-width: 2px,
  $base-color: #E1E2E3,
  $loading-color: #FF4557,
  $speed: 0.9s
) {
  display: inline-block;
  width: $size;
  height: $size;
  box-sizing: border-box;
  border-radius: 50%;

  border: $border-width solid $base-color;
  border-top-color: $loading-color;
  border-right-color: $base-color;
  border-bottom-color: $base-color;
  border-left-color: $base-color;

  transform: translateZ(0);
  vertical-align: middle;
  animation: circle-spin $speed linear infinite;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

// === Global keyframes (defined once) ===
@keyframes circle-spin {
  0% {
    transform: rotate(0deg) translateZ(0);
  }
  100% {
    transform: rotate(360deg) translateZ(0);
  }
}