// ==========
// 아이콘
// ==========

@use "sass:list";
@use "mixins" as *;

// 아이콘 맵 구조: (이름, dark경로, light경로, 크기, 트랜지션 여부, 모바일 크기(선택))
// 인자 설명:
// 1. name: 아이콘 클래스명 (예: 'down-arrow' → .ico-down-arrow)
// 2. dark-path: Dark 모드 아이콘 이미지 파일 경로
// 3. light-path: Light 모드 아이콘 이미지 파일 경로
// 4. size: 아이콘 크기 (width, height) - 기본값
// 5. has-transition: 트랜지션 효과 사용 여부 (true | false)
// 6. mobile-size: 모바일 크기 (선택) - 없으면 PC와 동일, 있으면 @media (lg)에서 적용
//
// 사용 방법:
// - 기본: <span class="ico-down-arrow"></span> (일반 background)
// - ::before: <span class="ico-down-arrow ico-before"></span>
// - ::after: <span class="ico-down-arrow ico-after"></span>
$icons: (
  (
    "up",
    "@/assets/icons/dark/ico_up.svg",
    "@/assets/icons/light/ico_up.svg",
    1.6rem,
    true
  ),
  (
    "up-white",
    "@/assets/icons/dark/ico_up_white.svg",
    "@/assets/icons/light/ico_up_white.svg",
    2.8rem,
    true
  ),
  (
    "down",
    "@/assets/icons/dark/ico_down.svg",
    "@/assets/icons/light/ico_down.svg",
    1.6rem,
    true
  ),
  (
    "down-white",
    "@/assets/icons/dark/ico_down_white.svg",
    "@/assets/icons/light/ico_down_white.svg",
    2.8rem,
    true
  ),
  (
    "down-thin",
    "@/assets/icons/dark/ico_down_thin.svg",
    "@/assets/icons/light/ico_down_thin.svg",
    2rem,
    true
  ),
  (
    "close",
    "@/assets/icons/dark/ico_close.svg",
    "@/assets/icons/light/ico_close.svg",
    2rem,
    true
  ),
  (
    "question",
    "@/assets/icons/dark/ico_question.svg",
    "@/assets/icons/light/ico_question.svg",
    1.6rem,
    true
  ),
  (
    "wallet",
    "@/assets/icons/dark/ico_wallet.svg",
    "@/assets/icons/light/ico_wallet.svg",
    2rem,
    true,
    1.6rem
  ),
  (
    "jackpot",
    "@/assets/icons/dark/ico_jackpot.svg",
    "@/assets/icons/light/ico_jackpot.svg",
    2rem,
    true
  ),
  (
    "jackpot-m",
    "@/assets/icons/dark/ico_jackpot_m.svg",
    "@/assets/icons/light/ico_jackpot_m.svg",
    2.4rem,
    true
  ),
  (
    "chat",
    "@/assets/icons/dark/ico_chat.svg",
    "@/assets/icons/light/ico_chat.svg",
    2rem,
    true
  ),
  (
    "chat-m",
    "@/assets/icons/dark/ico_chat_m.svg",
    "@/assets/icons/light/ico_chat_m.svg",
    2.4rem,
    true
  ),
  (
    "bell",
    "@/assets/icons/dark/ico_bell.svg",
    "@/assets/icons/light/ico_bell.svg",
    2rem,
    true
  ),
  (
    "bell-m",
    "@/assets/icons/dark/ico_bell_m.svg",
    "@/assets/icons/light/ico_bell_m.svg",
    2.4rem,
    true
  ),
  (
    "home-m",
    "@/assets/icons/dark/ico_home_m.svg",
    "@/assets/icons/light/ico_home_m.svg",
    2.4rem,
    true
  ),
  (
    "moon",
    "@/assets/icons/dark/ico_moon.svg",
    "@/assets/icons/light/ico_moon.svg",
    2rem,
    true
  ),
  (
    "sun",
    "@/assets/icons/dark/ico_sun.svg",
    "@/assets/icons/light/ico_sun.svg",
    2rem,
    true
  ),
  (
    "prefix",
    "@/assets/icons/dark/ico_prefix.svg",
    "@/assets/icons/light/ico_prefix.svg",
    2.4rem,
    true
  ),
  (
    "prefix-primary",
    "@/assets/icons/dark/ico_prefix_primary.svg",
    "@/assets/icons/light/ico_prefix_white.svg",
    2.4rem,
    true
  ),
  (
    "prefix-secondary",
    "@/assets/icons/dark/ico_prefix_secondary.svg",
    "@/assets/icons/light/ico_prefix_white.svg",
    2.4rem,
    true
  ),
  (
    "refresh",
    "@/assets/icons/dark/ico_refresh.svg",
    "@/assets/icons/light/ico_refresh.svg",
    2rem,
    true
  ),
  (
    "emoji",
    "@/assets/icons/dark/ico_emoji.svg",
    "@/assets/icons/light/ico_emoji.svg",
    1.8rem,
    true
  ),
  (
    "gif",
    "@/assets/icons/dark/ico_gif.svg",
    "@/assets/icons/light/ico_gif.svg",
    1.8rem,
    true
  ),
  (
    "send",
    "@/assets/icons/dark/ico_send.svg",
    "@/assets/icons/light/ico_send.svg",
    2rem,
    true
  ),
  (
    "chevron-down",
    "@/assets/icons/dark/ico_chevron_down.svg",
    "@/assets/icons/light/ico_chevron_down.svg",
    2rem,
    true
  ),
  (
    "user-primary",
    "@/assets/icons/dark/ico_user_primary.svg",
    "@/assets/icons/light/ico_user_white.svg",
    2.4rem,
    true
  ),
  (
    "user-thin",
    "@/assets/icons/dark/ico_user_thin.svg",
    "@/assets/icons/light/ico_user_thin.svg",
    2rem,
    true
  ),
  (
    "user-secondary",
    "@/assets/icons/dark/ico_user_secondary.svg",
    "@/assets/icons/light/ico_user_white.svg",
    2.4rem,
    true
  ),
  (
    "user-white",
    "@/assets/icons/dark/ico_user_white.svg",
    "@/assets/icons/light/ico_user_white.svg",
    2.4rem,
    true
  ),
  (
    "prefix-white",
    "@/assets/icons/dark/ico_prefix_white.svg",
    "@/assets/icons/light/ico_prefix_white.svg",
    2.4rem,
    true
  ),
  (
    "chevron-right",
    "@/assets/icons/dark/ico_chevron_right.svg",
    "@/assets/icons/light/ico_chevron_right.svg",
    1.6rem,
    true
  ),
  (
    "polygon",
    "@/assets/icons/dark/ico_polygon.svg",
    "@/assets/icons/light/ico_polygon.svg",
    1.4rem,
    true
  ),
  (
    "history",
    "@/assets/icons/dark/ico_history.svg",
    "@/assets/icons/light/ico_history.svg",
    2rem,
    true
  ),
  (
    "photo",
    "@/assets/icons/dark/ico_photo.svg",
    "@/assets/icons/light/ico_photo.svg",
    2rem,
    true
  ),
  (
    "eye",
    "@/assets/icons/dark/ico_eye.svg",
    "@/assets/icons/light/ico_eye.svg",
    2rem,
    true
  ),
  (
    "eye-active",
    "@/assets/icons/dark/ico_eye_active.svg",
    "@/assets/icons/light/ico_eye_active.svg",
    2rem,
    true
  ),
  (
    "logout",
    "@/assets/icons/dark/ico_logout.svg",
    "@/assets/icons/light/ico_logout.svg",
    1.6rem,
    true
  ),
  (
    "language",
    "@/assets/icons/dark/ico_language.svg",
    "@/assets/icons/light/ico_language.svg",
    1.6rem,
    true
  ),
  (
    "check",
    "@/assets/icons/dark/ico_check.svg",
    "@/assets/icons/light/ico_check.svg",
    2rem,
    true
  ),
  (
    "check-thin",
    "@/assets/icons/dark/ico_check_thin.svg",
    "@/assets/icons/light/ico_check_thin.svg",
    1.6rem,
    true
  ),
  (
    "date",
    "@/assets/icons/dark/ico_date.svg",
    "@/assets/icons/light/ico_date.svg",
    1.6rem,
    true
  ),
  (
    "sound-on",
    "@/assets/icons/dark/ico_sound_on.svg",
    "@/assets/icons/light/ico_sound_on.svg",
    2rem,
    true
  ),
  (
    "sound-off",
    "@/assets/icons/dark/ico_sound_off.svg",
    "@/assets/icons/light/ico_sound_off.svg",
    2rem,
    true
  )
);

// 아이콘 생성 믹스인
@mixin generate-icon($name, $path, $size, $has-transition, $mobile-size) {
  .ico-#{$name} {
    // 내부에서 사용할 CSS 변수 선언 (기본값은 $size)
    --ico-size: #{$size};

    // 기본: 일반 background로 적용
    &:not(.ico-before):not(.ico-after) {
      width: var(--ico-size);
      height: var(--ico-size);
      background: url($path) no-repeat center / contain;
      display: inline-block;

      // 모바일 크기가 PC와 다를 때만 적용
      @if $mobile-size !=$size {
        @include media("lg") {
          --ico-size: #{$mobile-size};
        }
      }
    }

    @if $has-transition {
      @include transition(all);
    }

    // modifier: ::before 의사요소로 적용
    &.ico-before {
      &::before {
        content: "";
        flex-shrink: 0;
        display: inline-block;
        width: var(--ico-size);
        height: var(--ico-size);
        background: url($path) no-repeat center / contain;

        @if $has-transition {
          @include transition(all);
        }
      }
    }

    // modifier: ::after 의사요소로 적용
    &.ico-after {
      &::after {
        content: "";
        flex-shrink: 0;
        display: inline-block;
        width: var(--ico-size);
        height: var(--ico-size);
        background: url($path) no-repeat center / contain;

        @if $has-transition {
          @include transition(all);
        }
      }
    }

    // 모바일 크기가 PC와 다를 때만 적용 (::before, ::after용)
    @if $mobile-size !=$size {
      @include media("lg") {
        --ico-size: #{$mobile-size};
      }
    }
  }
}

// 기본 테마 (Dark) 아이콘
html,
html[data-theme="dark"] {
  @each $icon in $icons {
    $name: list.nth($icon, 1); // 아이콘 이름
    $dark-path: list.nth($icon, 2); // Dark 모드 아이콘 파일 경로
    $size: list.nth($icon, 4); // 아이콘 크기
    $has-transition: list.nth($icon, 5); // 트랜지션 여부
    $mobile-size: null; // 모바일 크기 (기본값: null)

    // 모바일 크기가 제공된 경우
    @if list.length($icon) >5 {
      $mobile-size: list.nth($icon, 6);
    }

    // 모바일 크기가 없으면 PC 크기 사용
    @if $mobile-size ==null {
      $mobile-size: $size;
    }

    @include generate-icon(
      $name,
      $dark-path,
      $size,
      $has-transition,
      $mobile-size
    );
  }
}

// Light 모드 아이콘
html[data-theme="light"] {
  @each $icon in $icons {
    $name: list.nth($icon, 1); // 아이콘 이름
    $light-path: list.nth($icon, 3); // Light 모드 아이콘 파일 경로
    $size: list.nth($icon, 4); // 아이콘 크기
    $has-transition: list.nth($icon, 5); // 트랜지션 여부
    $mobile-size: null; // 모바일 크기 (기본값: null)

    // 모바일 크기가 제공된 경우
    @if list.length($icon) >5 {
      $mobile-size: list.nth($icon, 6);
    }

    // 모바일 크기가 없으면 PC 크기 사용
    @if $mobile-size ==null {
      $mobile-size: $size;
    }

    @include generate-icon(
      $name,
      $light-path,
      $size,
      $has-transition,
      $mobile-size
    );
  }
}