@use 'podo-ui/mixin' as *;

.button {
  // 기본 색상
  background: color(primary);
  color: color(primary-reverse);
  border: 1px solid color(primary);

  // 호버 상태
  &:hover {
    background: color(primary-hover);
    border-color: color(primary-hover);
  }

  // 눌림 상태
  &:active {
    background: color(primary-pressed);
  }

  // 포커스 상태
  &:focus {
    outline: 2px solid color(primary-outline);
  }
}

// Fill 스타일 버튼
.buttonFill {
  background: color(primary-fill);
  color: color(primary);
  border: 1px solid color(primary-outline);
}

<!-- 텍스트 색상 -->
<div class="primary">Primary 색상 텍스트</div>
<div class="danger">Danger 색상 텍스트</div>

<!-- 배경 색상 -->
<div class="bg-primary">Primary 배경</div>
<div class="bg-success-fill">Success Fill 배경</div>

<!-- 테두리 색상 -->
<div class="border-primary">Primary 테두리</div>
<div class="border-warning">Warning 테두리</div>

// Light 모드
document.documentElement.setAttribute('data-color-mode', 'light');

// Dark 모드
document.documentElement.setAttribute('data-color-mode', 'dark');

// 자동 (브라우저 설정 따름)
document.documentElement.setAttribute('data-color-mode', '');