/* ---- Base ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;

  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);

  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;

  border: none;
  cursor: pointer;
  user-select: none;

  transition: 0.18s ease;
}

/* ---- Size ---- */
.btn-sm {
  padding: 0.4rem 1rem;
  font-size: 1.2rem;
}

.btn-lg {
  padding: 1.2rem 2.4rem;
  font-size: 1.6rem;
}

/* ---- Primary ---- */
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}

.btn-primary:hover {
  background: var(--btn-primary-hover);
}

/* ---- Ghost ---- */
.btn-ghost {
  background: var(--btn-ghost-bg);
  border: 1px solid var(--btn-ghost-border);
  color: var(--btn-ghost-fg);
}

.btn-ghost:hover {
  background: var(--btn-ghost-hover);
}

/* ---- Danger ---- */
.btn-danger {
  background: var(--btn-danger-bg);
  color: var(--btn-danger-fg);
}

.btn-danger:hover {
  background: var(--btn-danger-hover);
}

/* ---- Header ---- */
.btn-header {
  padding: 0.4rem 1.2rem;
  height: 2.6rem;

  font-size: 1.2rem;
  font-weight: 500;

  border-radius: calc(var(--radius) - 2px);

  background: rgba(255, 255, 255, 0.08);
  color: var(--fg);

  border: 1px solid rgba(255, 255, 255, 0.12);

  transition: 0.15s ease;
}

.btn-header:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.22);
}

/* ---- Icon ---- */
.btn-icon {
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;

  border-radius: 50%;
  background: var(--btn-icon-bg);
  color: var(--fg);

  font-size: 1.3rem;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  background: var(--btn-icon-hover);
}

/* ---- Icon Text ---- */
.btn-icon-text {
  height: 2.8rem;
  padding: 0 1rem;

  border-radius: 1.4rem;
  background: var(--btn-icon-bg);
  color: var(--fg);

  font-size: 1.2rem;
}

.btn-icon-text:hover {
  background: var(--btn-icon-hover);
}

/* ---- Disabled ---- */
.btn-disabled,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Touch Device ---- */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  .btn,
  .btn-primary,
  .btn-ghost,
  .btn-danger,
  .btn-header,
  .btn-icon,
  .btn-icon-text {
    transition: none;
  }

  .btn:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .btn-danger:hover,
  .btn-header:hover,
  .btn-icon:hover,
  .btn-icon-text:hover {
    background: unset;
    border-color: unset;
    box-shadow: unset;
  }

  .btn:focus,
  .btn:focus-visible,
  .btn-header:focus,
  .btn-icon:focus {
    outline: none;
    box-shadow: none;
  }
}