/* =========================
   Icon Button – Base
========================= */

.icon-btn {
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);

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

  border-radius: 8px;
  padding: 0;

  border: none;
  cursor: pointer;
}

/* Icon */
.icon-btn i {
  font-size: 20px;
  line-height: 1;
}

/* =========================
   Primary
========================= */

.icon-btn--primary {
  background-color: var(--color-bg-brand-1st);
}

.icon-btn--primary i {
  color: var(--color-invert-1st);
}

/* =========================
   Secondary
========================= */

.icon-btn--secondary {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-invert-1st);
}

.icon-btn--secondary i {
  color: var(--color-invert-1st);
}