/**
 * @file _mixins.scss
 * @description
 * v3-pc 디자인 시스템의 공통 SCSS 믹스인과 함수를 정의합니다.
 * 이 파일은 버튼, 리스트 아이템, 타이포그래피, 그림자 등
 * 재사용 가능한 스타일 헬퍼를 포함합니다.
 */

// ==========================================================================
//
//   MODULE IMPORTS & FORWARDS
//
// ==========================================================================

@use 'sass:map';
@use 'sass:meta';
@use 'figma' as *;
@use 'buttons' as *;
@use 'animations' as *;
@use 'typography' as *;
@use 'functions' as *;

@forward 'typography';
@forward 'functions';

// ==========================================================================
//
//   UTILITY MIXINS
//
// ==========================================================================

/**
 * @mixin text-overflow
 * @description
 * 텍스트가 영역을 벗어날 때 말 줄임표(...)를 적용합니다.
 *
 * @param {String} $whiteSpace [nowrap] - white-space 속성 값
 *
 */
@mixin text-overflow($whiteSpace: nowrap) {
  overflow: hidden;
  white-space: $whiteSpace;
  text-overflow: ellipsis;
}

/**
 * @mixin interactionLayer
 * @description
 * 호버/액티브 상태에 따른 표면 오버레이를 적용합니다. 주어진 기본 색상과
 * `--interaction-surface`를 color-mix로 혼합해 일관된 인터랙션 레이어를 제공합니다.
 *
 * @param {Color} $base [black] - 혼합에 사용할 기본 색상 (보통 요소의 배경/테마 색)
 */
@mixin interactionLayer($base: black, $strength: normal, $blue: false) {
  $interaction-surface: var(--interaction-surface);
  @if $blue {
    $interaction-surface: var(--interaction-blue);
  }
  &:not(:disabled) {
    background-color: color-mix(in srgb, $base, $interaction-surface 0%);
    @if $strength == 'strong' {
      &:hover {
        background-color: color-mix(in srgb, $base, $interaction-surface 10%);
      }
      &:active,
      &[data-active='true'] {
        background-color: color-mix(in srgb, $base, $interaction-surface 14%);
      }
    } @else if $strength == 'light' {
      &:hover {
        background-color: color-mix(in srgb, $base, $interaction-surface 4%);
      }
      &:active,
      &[data-active='true'] {
        background-color: color-mix(in srgb, $base, $interaction-surface 8%);
      }
    } @else {
      &:hover {
        background-color: color-mix(in srgb, $base, $interaction-surface 8%);
      }
      &:active,
      &[data-active='true'] {
        background-color: color-mix(in srgb, $base, $interaction-surface 12%);
      }
    }
  }
}

// ==========================================================================
//
//   BUTTON MIXINS
//
// ==========================================================================

/**
 * @mixin button
 * @description
 * 기본 버튼 스타일을 적용합니다.
 * (./buttons.scss 파일을 참고하여 스타일을 적용합니다.)
 *
 * @param {String} $size ['medium'] - 버튼 크기 ('small' | 'medium' | 'large')
 * @param {String} $variant ['primary'] - 버튼 변형 ('primary' | 'secondary' | 'tertiary' | 'negative')
 * @param {String} $type ['filled'] - 버튼 타입 ('filled' | 'tonal' | 'outlined' | 'ghost' | 'text')
 *
 */
@mixin button($size: 'medium', $variant: 'primary', $type: 'filled') {
  // 공통 스타일
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: all 0.2s;

  .icon {
    flex-grow: 0;
    flex-shrink: 0;
  }

  .text {
    @include text-overflow;
  }

  // text의 경우엔 예외
  @if $type == text or $type == 'text' {
    @include text-button-styles($variant, $size);
  } @else {
    // ./buttons.scss 의 믹스인 적용
    @include apply-button-size($size);
    @include apply-button-styles($type, $variant);
  }
}

/**
 * @mixin iconButton
 * @description
 * 아이콘 버튼 스타일을 적용합니다.

 * @param {Map} $options [()] - 옵션 맵
 * - 'type': (기본: 'normal-filled') 'normal-filled' | 'normal-tonal' | 'normal-outlined' | 'normal-ghost' 
 *           | 'unfilled' | 'filled-square' | 'filled-circle'

 * - 'size':  (기본: 'large') 'small' | 'medium' | 'large'
 * - 'variant':  (기본: 'primary', type이 normal-로 시작할 때 사용) 'primary' | 'secondary' | ...
 * - 'color': CSS color (기본: var(--refine-primary), type이 normal-로 시작하지 않을 때 사용)

 iconButton(
  (
    'type': 'normal-filled',
    'size': 'large',
    'variant': 'primary',
  )
 )

iconButton(
  (
    'type': 'filled-square',
    'size': 'large',
    'color': var(--refine-accent),
  )
 )
 */
@mixin iconButton($options: ()) {
  $type: map.get($options, 'type') or 'normal-filled';
  $size: map.get($options, 'size') or 'large';
  $variant: map.get($options, 'variant') or 'primary';
  $color: map.get($options, 'color') or var(--refine-primary);

  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: $color;

  @if $type == 'unfilled' {
    &:not(:disabled) {
      &:hover {
        color: hover-overlay($color, var(--interaction-surface, #000), 0.1);
      }
      &:active {
        color: hover-overlay($color, var(--interaction-surface, #000), 0.14);
      }
    }
  }

  &:disabled {
    pointer-events: none;
  }

  // ./icon-buttons.scss 참고
  @include apply-icon-button-sizes($type, $size);
  @include apply-icon-button-styles($type, $variant);
}

// ==========================================================================
//
//   LIST ITEM (Dropdown/Menu) MIXINS
//
// ==========================================================================

/**
 * @mixin list-item-wrapper
 * @description
 * 드롭다운 메뉴의 최상위 컨텐츠 래퍼(Wrapper) 스타일을 정의합니다.
 */
@mixin list-item-wrapper {
  padding: 6px;
  background-color: var(--fill-surface-secondary);
  border: 1px solid var(--line-secondary);
  border-radius: var(--radius-8);
  box-shadow:
    0 14px 28px -6px var(--elevation-30),
    0 2px 4px -1px var(--elevation-40);
}

/**
 * @mixin list-item-base
 * @description
 * 클릭 가능한 기본 리스트 아이템의 스타일을 정의합니다.
 */
@mixin list-item-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 10px;
  color: var(--label-primary);
  cursor: pointer;
  transition: all 0.2s;
  @include label-13-r;

  &:hover:not([data-disabled]),
  &:focus:not([data-disabled]) {
    border-radius: var(--radius-6);
    background-color: color-mix(
      in srgb,
      var(--interaction-blue) 4%,
      transparent
    );
    outline: none;
  }

  &[data-disabled] {
    cursor: default;
  }
}

/**
 * @mixin list-item-group
 * @description
 * 리스트 아이템들을 그룹화하는 래퍼 스타일을 정의합니다.
 */
@mixin list-item-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: stretch;
}

/**
 * @mixin list-header
 * @description
 * 리스트 아이템 그룹의 제목(레이블) 스타일을 정의합니다.
 */
@mixin list-header {
  padding: 6px 8px 2px 8px;
  color: var(--label-quaternary);
  @include caption-12-r;
}

// ==========================================================================
//
//   ELEVATION (Shadow) MIXINS
//
// ==========================================================================

@mixin effect-style-200() {
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.28);
}

@mixin elevation-10 {
  box-shadow: 0px 3px 6px var(--elevation-10, #0000005c);
}
@mixin elevation-20 {
  box-shadow: 0px 4px 8px var(--elevation-20, #0000005c);
}
@mixin elevation-30 {
  box-shadow: 0px 6px 11px var(--elevation-30, #00000054);
}
@mixin elevation-40 {
  box-shadow: 0px 8px 14px var(--elevation-40, #0000004d);
}
@mixin elevation-blur-10 {
  backdrop-filter: blur(8px);
  box-shadow: 0px 2px 6px var(--elevation-10, #0000005c);
}
@mixin elevation-blur-20 {
  backdrop-filter: blur(8px);
  box-shadow: 0px 4px 9px var(--elevation-20, #0000005c);
}
@mixin elevation-blur-30 {
  backdrop-filter: blur(8px);
  box-shadow: 0px 6px 18px var(--elevation-30, #00000054);
}
@mixin elevation-blur-40 {
  box-shadow: 0px 8px 20px var(--elevation-40, #0000004d);
}
