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


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

@mixin ellipsis($lines) {
  -webkit-line-clamp: $lines;
  display: -webkit-box;
  -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}");
  }
}



// -------------------------------------------
// 🔘 Flexible Swiper Pagination Dots Mixin
// Usage:
// @include slider-dots(
//  10px, 10px, 0, 50%, $cool-gray-03, $primary-01,
//  24px, right, 240px, relative, 240px, center
//);
// -------------------------------------------
@mixin slider-dots(
  $width,
  $height,
  $bottom-offset,
  $border-radius,
  $bg-default,
  $bg-active,
  $space: 6px,
  $horizontal-align: center,       // left | center | right
  $horizontal-offset: null,
  $position: absolute,
  $container-width: null,          // Optional: width like 240px
  $custom-justify: null            // Optional: override justify-content
) {
  .swiper-pagination {
    position: $position;
    bottom: $bottom-offset;
    display: flex;
    align-items: center;

    @if $container-width != null {
      width: $container-width;
    }

    @if $horizontal-align == left {
      left: if($horizontal-offset != null, $horizontal-offset, 0);
      right: auto;
      transform: none;
      justify-content: if($custom-justify != null, $custom-justify, flex-start);
    } @else if $horizontal-align == right {
      right: if($horizontal-offset != null, $horizontal-offset, 0);
      left: auto;
      transform: none;
      justify-content: if($custom-justify != null, $custom-justify, flex-end);
    } @else {
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      justify-content: if($custom-justify != null, $custom-justify, center);
    }

    .swiper-pagination-bullet {
      width: $width;
      height: $height;
      background-color: $bg-default;
      border-radius: $border-radius;
      opacity: 1;
      cursor: pointer;
      &:not(:last-of-type){
        margin-right: $space;
      }

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


// -------------------------------------------
// 🔤 Ellipsis (Text Font Sizes)
// Usage: @include font-size(24, 700); // applies font-size, line-height, and font-weight
// Usage: @include font-size(16); // applies only font-size and line-height
// -------------------------------------------

@mixin font-size($size, $weight: null, $color: null) {
  @if $size == 12 {
    font-size: 12px;
    line-height: 18px;
  } @else if $size == 14 {
    font-size: 14px;
    line-height: 20px;
  } @else if $size == 15 {
    font-size: 15px;
    line-height: 19px;
  } @else if $size == 16 {
    font-size: 16px;
    line-height: 22px;
  } @else if $size == 17 {
    font-size: 17px;
    line-height: 20px;
  } @else if $size == 18 {
    font-size: 18px;
    line-height: 24px;
  } @else if $size == 20 {
    font-size: 20px;
    line-height: 26px;
  } @else if $size == 24 {
    font-size: 24px;
    line-height: 30px;
  } @else if $size == 30 {
    font-size: 30px;
    line-height: 38px;
  } @else if $size == 32 {
    font-size: 32px;
    line-height: 36px;
  } @else {
    @warn "Unsupported font size: #{$size}px";
  }

  // Conditionally apply font-weight if provided
  @if $weight != null {
    font-weight: $weight;
  }

  // Conditionally apply font-weight if provided
  @if $color != null {
    color: $color;
  }
}