@use "sass:map";
@use "sass:list";
@use "sass:meta";
@use "sass:string";
@use "variables" as *;
@use "typography" as *;
@use "function" as *;

// blind
@mixin blind {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  margin: -1px;
}

// ellipsis (단일/멀티라인)
@mixin ellipsis($lines: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
}

@mixin viewport-center($position: absolute) {
  position: $position;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

@mixin bg-image($path, $size: cover, $important: false) {
  @if $important {
    background: url($path) no-repeat center / $size !important;
  } @else {
    background: url($path) no-repeat center / $size;
  }
}

@mixin scrollbar($width: 0.4rem, $radius: 0.4rem) {
  &::-webkit-scrollbar {
    width: $width;
  }
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #5d5d5d;
    border-radius: $radius;
  }
}

@mixin scrollbar-x($height: 0.4rem, $radius: 0.4rem) {
  &::-webkit-scrollbar {
    height: $height;
  }
  &::-webkit-scrollbar-track {
    background-color: rgba(93, 93, 93, 1);
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(153, 153, 153, 1);
    border-radius: $radius;
  }
}

// media mixin
@mixin media($size) {
  $width: map.get($breakpoints, $size);
  @if not $width {
    $width: $size;
  }
  @media (max-width: #{$width}) {
    @content;
  }
}

@mixin cq($size, $container-name: null) {
  $width: map.get($breakpoints, $size);
  @if not $width {
    $width: $size;
  }

  @if $container-name {
    @container #{$container-name} (max-width: #{$width}) {
      @content;
    }
  } @else {
    @container (max-width: #{$width}) {
      @content;
    }
  }
}

@mixin typography(
  $variant: null,
  $fs: null,
  $lh: null,
  $letter-spacing: $letter-spacing
) {
  // desktop 값
  @if $variant {
    $values: map.get($typography-desktop, $variant);

    @if $values {
      $fs: list.nth($values, 1);
      $lh: list.nth($values, 2);
    }
  }

  @if $fs {
    font-size: $fs;
  }

  @if $lh {
    line-height: $lh;
  }

  @if $letter-spacing {
    letter-spacing: $letter-spacing;
  }

  // mobile 값 (<= lg) 오버라이드
  @if $variant {
    @include media("lg") {
      $m-values: map.get($typography-mobile, $variant);

      @if $m-values {
        $m-fs: list.nth($m-values, 1);
        $m-lh: list.nth($m-values, 2);

        @if $m-fs {
          font-size: $m-fs;
        }

        @if $m-lh {
          line-height: $m-lh;
        }
      }
    }
  }
}

@mixin digit($variant: null, $lh: null) {
  @if $variant {
    $values: map.get($digit, $variant);

    @if $values {
      $lh: list.nth($values, 1);
    }
  }

  @if $lh {
    height: $lh;
  }

  @if $variant {
    @include media("lg") {
      $m-values: map.get($digit-mobile, $variant);

      @if $m-values {
        $m-lh: list.nth($m-values, 1);

        @if $m-lh {
          height: $m-lh;
        }
      }
    }
  }
}

// button set (기본 스타일 - size는 클래스로 관리)
@mixin btnset(
  $bg: $primary,
  $line: $primary,
  $color: $text-high,
  $hover-bg: null,
  $hover-line: null,
  $hover-color: null
) {
  @include transition(all);
  @include typography("p1");

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.6rem;
  width: auto;
  height: 4.4rem; // 기본 높이 (size variant 클래스로 override)
  border-radius: 0.6rem;

  // gradient인지 확인하여 적절한 속성 사용
  @if meta.type-of($bg) ==string and string.index($bg, "gradient") {
    background: $bg;
  } @else {
    background-color: $bg;
  }

  border: 1px solid $line;
  color: $color;
  font-weight: 600;

  @include media("lg") {
    @include typography("p1");

    padding: 0 1.2rem;
    height: 3.2rem;
  }

  @if $hover-bg or $hover-line or $hover-color {
    &:hover {
      @if $hover-bg {
        // gradient인지 확인하여 적절한 속성 사용
        @if meta.type-of($hover-bg)
          ==string and
          string.index($hover-bg, "gradient")
        {
          background: $hover-bg;
        } @else {
          background-color: $hover-bg;
        }
      }

      @if $hover-line {
        border-color: $hover-line;
      }

      @if $hover-color {
        color: $hover-color;
      }
    }
  }
}

// button variant with size variants
@mixin btn-variant(
  $name,
  $bg: $primary,
  $line: $primary,
  $color: $text-high,
  $hover-bg: null,
  $hover-line: null,
  $hover-color: null
) {
  // 기본 버튼 스타일
  .btn-#{$name} {
    @include btnset(
      $bg: $bg,
      $line: $line,
      $color: $color,
      $hover-bg: $hover-bg,
      $hover-line: $hover-line,
      $hover-color: $hover-color
    );
  }

  // Size variants
  .btn-#{$name}.btn-lg {
    @include typography("h2");

    padding: 0 2.8rem;
    height: 6.4rem;
    border-radius: 0.8rem;
    font-weight: 700;

    @include media("lg") {
      @include typography("h4");

      padding: 0 1.6rem;
      height: 4.8rem;
    }
  }

  .btn-#{$name}.btn-md {
    @include typography("h3");

    padding: 0 2.8rem;
    height: 6rem;
    border-radius: 0.8rem;

    @include media("lg") {
      @include typography("h4");

      padding: 0 1.6rem;
      height: 4.2rem;
    }
  }

  .btn-#{$name}.btn-md-plus {
    padding: 0 2.8rem;
    height: 4.8rem;
    border-radius: 0.8rem;

    @include media("lg") {
      padding: 0 1.6rem;
      height: 4rem;
    }
  }

  .btn-#{$name}.btn-sm {
    @include typography("p2");

    height: 4rem;

    @include media("lg") {
      @include typography("p1");

      padding: 0 1.2rem;
      height: 3.2rem;
    }
  }

  // Disabled variant (hover 효과 없음)
  .btn-#{$name}.btn-disabled,
  .btn-#{$name}:disabled {
    @if meta.type-of($bg) ==string and string.index($bg, "gradient") {
      background: theme-color($disabled);
    } @else {
      background-color: theme-color($disabled);
    }

    color: #999;
    border-color: transparent;
    cursor: not-allowed;

    &:hover {
      @if meta.type-of($bg) ==string and string.index($bg, "gradient") {
        background: theme-color($disabled);
      } @else {
        background-color: theme-color($disabled);
      }

      border-color: transparent;
      color: #999;
    }
  }
}

// input set (기본 스타일 - size는 클래스로 관리)
@mixin inputset(
  $line: theme-color($border-mid),
  $color: theme-color($text-high),
  $hover-line: theme-color($primary),
  $focus-line: theme-color($primary),
  $active-line: theme-color($primary)
) {
  display: block;
  padding: 0 1.6rem;
  width: 100%;
  height: 4.8rem; // 기본 높이 (size variant 클래스로 override)
  border-radius: 0.8rem;
  border: 1px solid $line;
  background-color: theme-color($invert-container);
  color: $color;
  outline: none;
  @include transition((border-color, color));

  &::placeholder {
    color: theme-color($text-low);
  }

  @include media("lg") {
    height: 4rem;
    border-radius: 0.6rem;
    padding: 0 0.8rem;
  }

  &:hover {
    border-color: $hover-line;
  }

  &:focus {
    border-color: $focus-line;
  }

  &:active {
    border-color: $active-line;
  }
}

// input variant with size variants
@mixin input-variant(
  $name,
  $line: theme-color($border-mid),
  $color: theme-color($text-high),
  $hover-line: theme-color($primary),
  $focus-line: theme-color($primary),
  $active-line: theme-color($primary)
) {
  // 기본 input 스타일
  .input-#{$name} {
    @include inputset(
      $line: $line,
      $color: $color,
      $hover-line: $hover-line,
      $focus-line: $focus-line,
      $active-line: $active-line
    );
  }

  // Size variants
  .input-#{$name}.input-lg {
    height: 5.6rem;

    @include media("lg") {
      padding: 0 1.6rem;
      height: 4.8rem;
    }
  }

  .input-#{$name}.input-md {
    height: 4.4rem;

    @include media("lg") {
      height: 4rem;
    }
  }

  .input-#{$name}.input-sm {
    height: 3.2rem;
  }

  .input-#{$name}.input-error {
    border-color: theme-color($secondary);
  }

  .input-#{$name}.input-pw {
    padding-right: 4rem;
  }

  // Disabled variant
  .input-#{$name}.input-disabled,
  .input-#{$name}:disabled {
    background-color: theme-color($invert-container);
    color: theme-color($text-low);
    border-color: theme-color($border-mid);
    cursor: not-allowed;

    &:hover,
    &:focus,
    &:active {
      border-color: theme-color($border-mid);
    }
  }
}

@mixin transition(
  $properties,
  $duration: 0.28s,
  $ease: cubic-bezier(0.22, 0.61, 0.36, 1)
) {
  // 단일 속성 문자열인 경우 리스트로 변환
  @if meta.type-of($properties) ==string {
    $properties: ($properties);
  }

  $transitions: ();

  @each $property in $properties {
    $transitions: list.append($transitions, $property $duration $ease, comma);
  }

  transition: $transitions;
}

@mixin hidden($opacity: 0, $visibility: hidden) {
  opacity: $opacity;
  visibility: $visibility;
}

// ============================================
// 테마 관련 함수 & 믹스인
// ============================================

// 테마 맵을 CSS 변수로 변환하는 믹스인
@mixin theme-map($map: ()) {
  @each $key, $value in $map {
    #{$key}: $value;
  }
}

// 테마 컬러를 rgb로 반환하는 함수 (그라디언트는 그대로 반환)
@function theme-color($key, $map: $theme-dark) {
  $value: map.get($map, $key);
  // 그라디언트인 경우 그대로 반환
  @if $value and
    meta.type-of($value) ==
    string and
    string.index($value, "gradient")
  {
    @return var($key);
  }
  // rgba 값인 경우 그대로 반환
  @if $value and meta.type-of($value) == string and string.index($value, "rgba")
  {
    @return var($key);
  }
  // 일반 색상인 경우 rgb()로 감싸서 반환
  @return rgb(var($key));
}

// 테마 컬러를 rgba로 반환하는 함수 (투명도 조절 가능)
@function theme-rgba($key, $opacity, $map: $theme-dark) {
  @return rgba(var($key), $opacity);
}

@mixin flexCenter($justify: center) {
  display: flex;
  justify-content: $justify;
  align-items: center;
}

@mixin img-fit($size: cover) {
  width: 100%;
  height: 100%;
  object-fit: $size;
}

@mixin auto-grid($min: 20rem, $gap: 2rem) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min($min), 1fr));
  gap: $gap;
}