/*
====================
Button
=====================
  */

.btn {
  padding: 14px 18px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  font-size: var(--font-normal);
  line-height: 12px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btn--sm {
  padding: 10px 14px;
  font-size: var(--font-small);
}

.btn-container {
  display: flex;
  gap: 16px;
}

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

.btn--primary {
  background-color: var(--theme-primary);
  color: var(--text-bright);
  border: none;
}

.btn--primary:not(.home)::after {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>');
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  vertical-align: middle;
}


.btn--primary.home::before {
  content: url('data:image/svg+xml;utf8,<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.4239 4.99775L6.62767 0.625L0.826067 4.99775C0.706129 5.10841 0.634011 5.26143 0.625 5.42436V12.1019C0.625422 12.2401 0.680512 12.3725 0.778239 12.4702C0.875967 12.5679 1.00839 12.623 1.1466 12.6234H4.625V9.82537C4.625 9.29501 4.83571 8.78637 5.21079 8.41135C5.58586 8.03633 6.09457 7.82564 6.625 7.82564C7.15543 7.82564 7.66414 8.03633 8.03921 8.41135C8.41429 8.78637 8.625 9.29501 8.625 9.82537V12.625H12.1029C12.2411 12.6246 12.3736 12.5695 12.4714 12.4718C12.5692 12.3741 12.6244 12.2417 12.625 12.1035V5.42436C12.6158 5.26149 12.5437 5.10855 12.4239 4.99775Z" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
}

.btn--primary:hover {
  background-color: var(--theme-primary-dark);
  cursor: pointer;
}

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

.btn--secondary {
  background-color: var(--bg-transparent);
  color: var(--text-dark);
  border: 1px solid var(--theme-primary-semi-transparent);
}

.btn--secondary.arrow::after {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>');
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  vertical-align: middle;
}

.btn--secondary:hover {
  background-color: var(--theme-primary-semi-transparent);
  cursor: pointer;
}