/* 공통 버튼 스타일 */
/* 기본 버튼 공통 스타일 */
.btn {
  display: inline-flex;
  padding: 0.5rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-rounded-md);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  border: none;
}

.btn:hover {
  cursor: pointer;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.primary-btn {
  background: var(--bg-primary);
  color: var(--text-primary-foreground);

  &:hover {
    background: var(--bg-primary-90);
  }
}

.secondary-btn {
  background: var(--bg-secondary);
  color: var(--text-foreground);

  &:hover {
    background: var(--bg-secondary-80);
  }
}

.destructive-btn {
  background: var(--bg-destructive);
  color: var(--text-primary-foreground);

  &:hover {
    background: var(--bg-destructive-90);
  }
}

.outline-btn {
  border: 1px solid var(--border-border-input, #e4e4e7);
  background: var(--bg-background);
  color: var(--text-secondary-foreground);

  &:hover {
    background: var(--bg-accent);
  }
}

.link-btn {
  background: var(--bg-background);
  color: var(--text-foreground);

  &:hover {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
  }
}

.ghost-btn {
  background: var(--bg-background);
  color: var(--text-foreground);

  &:hover {
    background: var(--bg-accent);
  }
}

.icon-btn {
  display: flex;
  padding: 0.25rem;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;

  i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1rem;
    height: 1rem;
  }
}