// FoxCarouselButton — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                            carousel-arrow (163:420 · 섹션 391:4034)
//                            carousel-atomic (680:5710 · 섹션 683:5904)
//
// 마크업 계약 (React 밖 소비자용):
//   <button class="fox-carousel-button fox-carousel-button--outlined fox-carousel-button--md"
//           type="button" aria-label="이전">
//     <span class="fox-carousel-button__icon">…svg…</span>
//   </button>
//
// 두 시안이 한 컴포넌트다 — 원형·흰 바탕·아이콘 하나까지 같고 테두리와 그림자만 다르다.
//   - outlined = carousel-arrow: 테두리가 있고 hover·pressed에서 떠오른다(그림자 neutral/lv2).
//   - plain    = carousel-atomic: 테두리도 그림자도 없다.
// 아이콘 색도 갈린다 — outlined만 hover·pressed에서 진해지고, plain은 그대로다(시안 확인).
//
// 크기는 상자 높이 토큰을 그대로 쓴다. lg가 PC 56 / 모바일 48로 줄어드는 건 반응형 토큰의
// 성질이고, 시안의 56은 PC 값이다.
//
// 토큰이 아닌 값:
//   - 그림자 색: 시안이 테마 토큰이 아니라 `alpha/black10` 원시값에 직접 물려 놓았다
//     (fox-select-option과 같은 사정). 그래서 다크 모드에서도 검은 그림자다.
//   - appearance / cursor 관련: 구조·상호작용 규칙.

@use "abstracts" as fox;

// 시안 neutral/lv2 — 그림자 둘이 겹친다.
@mixin _lifted {
  box-shadow:
    fox.shadow(location3) fox.shadow(location3) fox.shadow(blur3) 0
      fox.primitive(alpha-black10),
    fox.shadow(location1) fox.shadow(location1) fox.shadow(blur2) 0
      fox.primitive(alpha-black10);
}

.fox-carousel-button {
  box-sizing: border-box;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: fox.radius(max);
  background: fox.color(action-default);
  color: fox.color(icon-neutral-subtle);
  cursor: pointer;

  &__icon {
    display: inline-flex;

    > * {
      inline-size: 100%;
      block-size: 100%;
    }
  }

  // ── 크기 (정사각) ──────────────────────────────────────────────────────────
  &--lg {
    inline-size: fox.form(height-lg);
    block-size: fox.form(height-lg);
  }

  &--lg &__icon {
    inline-size: fox.icon(6);
    font-size: fox.icon(6);
    block-size: fox.icon(6);
  }

  &--md {
    inline-size: fox.form(height-md);
    block-size: fox.form(height-md);
  }

  &--md &__icon {
    inline-size: fox.icon(5);
    font-size: fox.icon(5);
    block-size: fox.icon(5);
  }

  &--sm {
    inline-size: fox.form(height-sm);
    block-size: fox.form(height-sm);
  }

  &--sm &__icon {
    inline-size: fox.icon(3);
    font-size: fox.icon(3);
    block-size: fox.icon(3);
  }

  // ── 계열 ──────────────────────────────────────────────────────────────────
  &--outlined {
    border: fox.border(1) solid fox.color(border-neutral-subtle);

    &:hover:not(:disabled) {
      background: fox.color(action-default-hover);
      color: fox.color(icon-neutral-default);

      @include _lifted;
    }

    &:active:not(:disabled) {
      background: fox.color(action-default-pressed);
      color: fox.color(icon-neutral-default);

      @include _lifted;
    }
  }

  &--plain {
    &:hover:not(:disabled) {
      background: fox.color(action-default-hover);
    }

    &:active:not(:disabled) {
      background: fox.color(action-default-pressed);
    }
  }

  // 잠기면 회색 원 하나가 된다 — 테두리도 바탕색과 같아져 사라진 것처럼 보인다.
  &:disabled {
    border-color: fox.color(button-disabled-surface);
    background: fox.color(button-disabled-surface);
    color: fox.color(icon-neutral-disabled-strong);
    cursor: default;
  }
}