/* =====================
   BUTTON SYSTEM
===================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.7em 2.2em;

  border-radius: 999px;

  font-weight: 600;
  letter-spacing: 0.04em;

  background: var(--buttons-color);
  color: #fff;

  cursor: pointer;
  border: none;

  transition:
    background-color .3s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

/* hover */

.btn:hover {
  background: var(--buttons-hover-color);
  transform: translateY(-2px);

  box-shadow:
    0 10px 25px rgba(0,0,0,0.45);
}

/* =====================
   VARIANTS
===================== */

.btn--outline {
  background: transparent;
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
}

.btn--outline:hover {
  background: var(--accent-color);
  color: #000;
}

.btn--ghost {
  background: transparent;
  color: var(--accent-color);
}

.btn--ghost:hover {
  background: rgba(255,255,255,0.08);
}

/* =====================
   SIZES
===================== */

.btn--sm {
  padding: 0.45em 1.4em;
  font-size: 0.85rem;
}

.btn--lg {
  padding: 1em 3em;
  font-size: 1.1rem;
}

/* =====================
   ICON SUPPORT
===================== */

.btn i {
  margin-right: .5em;
}

/* =====================
   DISABLED
===================== */

.btn[disabled],
.btn.is-disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}