.custom-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  height: var(--btn-height-s);
  padding: 0 var(--btn-padding-x);
  border-radius: var(--btn-radius);
  border: 1px solid transparent;

  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1;

  cursor: pointer;

  transition:
    background-color var(--btn-transition),
    color var(--btn-transition);
}

.custom-anchor{
  display: inline-flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
  height: var(--btn-height-s);
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1;

  cursor: pointer;

  transition:color var(--btn-transition);
}

.custom-btn:focus{
  outline: none;
}
.custom-btn:focus-visible{
  outline: none;
}

.custom-btn:disabled{
  cursor: not-allowed;
  pointer-events: none;
}

.btn-spinner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  opacity: 0;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.custom-btn.is-loading .btn-text,
.custom-btn.is-loading .btn-icon {
  visibility: hidden;
}


/* Icons */
.btn-icon {
  display: inline-flex;
  color: currentColor;
}

.btn-icon svg{
  width: 16px;
  height: 16px;
}

.custom-btn.is-loading .btn-spinner {
  opacity: 1;
}

.btn--icon-only {
  padding: var(--spacing-sm2);
  border-radius: 200px;
  width: 36px;
  height: 36px;
}





/* ======================================================
   DEFAULT
====================================================== */

/* ===== PRIMARY ===== */
.btn--primary.btn--default {
  background-color: var(--def-pri-default);
  color: var(--def-pri-default-text);
}
.btn--primary.btn--default:hover {
  background-color: var(--def-pri-hover);
  color: var(--def-pri-hover-text);
}
.btn--primary.btn--default:active {
  background-color: var(--def-pri-pressed);
  color: var(--def-pri-pressed-text);
}
.btn--primary.btn--default:focus-visible{
  background-color: var(--def-pri-focus);
  color: var(--def-pri-focus-text);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--def-pri-focus);
}
.btn--primary.btn--default:disabled{
  background-color: var(--def-pri-disabled);
  color: var(--def-pri-disabled-text);
}
.btn--primary.btn--default.is-loading{
  background-color: var(--def-pri-loading);
  color: var(--def-pri-loading-text);
  pointer-events: none;
}

/* ===== SECONDARY ===== */
.btn--secondary.btn--default {
  background-color: var(--def-sec-default);
  color: var(--def-sec-default-text);
}
.btn--secondary.btn--default:hover {
  background-color: var(--def-sec-hover);
  color: var(--def-sec-hover-text);
}
.btn--secondary.btn--default:active {
  background-color: var(--def-sec-pressed);
  color: var(--def-sec-pressed-text)
}
.btn--secondary.btn--default:focus-visible{
  background-color: var(--def-sec-focus);
  color: var(--def-sec-focus-text);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--def-sec-focus-text);
}
.btn--secondary.btn--default:disabled{
  background-color: var(--def-sec-disabled);
  color: var(--def-sec-disabled-text);
}
.btn--secondary.btn--default.is-loading{
  background-color: var(--def-sec-loading);
  color: var(--def-sec-loading-text);
  pointer-events: none;
}

/* ===== TERTIARY ===== */
.btn--tertiary.btn--default {
  background-color: transparent;
  color: var(--def-ter-default-text);
}
.btn--tertiary.btn--default:hover {
  background-color: transparent;
  color: var(--def-ter-hover-text);
}
.btn--tertiary.btn--default:active{
  background-color: transparent;
  color: var(--def-ter-pressed-text)
}
.btn--tertiary.btn--default:focus-visible{
  background-color: transparent;
  color: var(--def-ter-focus-text);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--def-ter-focus-text);

}
.btn--tertiary.btn--default:disabled{
  background-color: transparent;
  color: var(--def-ter-disabled-text);
}
.btn--tertiary.btn--default.is-loading{
  background-color: transparent;
  color: var(--def-ter-loading-text);
  pointer-events: none;
}

/* ======================================================
   ALTERNATIVE
====================================================== */

/* ===== PRIMARY ALT ===== */
.btn--primary.btn--alt {
  background-color: var(--alt-pri-default);
  color: var(--alt-pri-default-text);
}
.btn--primary.btn--alt:hover {
  background-color: var(--alt-pri-hover);
  color: var(--alt-pri-hover-text);
}
.btn--primary.btn--alt:active {
  background-color: var(--alt-pri-pressed);
  color: var(--alt-pri-pressed-text);
}
.btn--primary.btn--alt:focus-visible{
  background-color: var(--alt-pri-focus);
  color: var(--alt-pri-focus-text);
  box-shadow:
    0 0 0 2px #124734,
    0 0 0 4px #ffffff;
}
.btn--primary.btn--alt:disabled{
  background-color: var(--alt-pri-disabled);
  color: var(--alt-pri-disabled-text);
}
.btn--primary.btn--alt.is-loading{
  background-color: var(--alt-pri-loading);
  color: var(--alt-pri-loading-text);
  pointer-events: none;
}

/* ===== SECONDARY ALT ===== */
.btn--secondary.btn--alt {
  background-color: var(--alt-sec-default);
  color: var(--alt-sec-default-text);
}
.btn--secondary.btn--alt:hover {
  background-color: var(--alt-sec-hover);
  color: var(--alt-sec-hover-text);
}
.btn--secondary.btn--alt:active {
  background-color: var(--alt-sec-pressed);
  color: var(--alt-sec-pressed-text);
}
.btn--secondary.btn--alt:focus-visible{
  background-color: var(--alt-sec-focus);
  color: var(--alt-sec-focus-text);
  box-shadow:
    0 0 0 2px #124734,
    0 0 0 4px #ffffff;
}
.btn--secondary.btn--alt:disabled{
  background-color: var(--alt-sec-disabled);
  color: var(--alt-sec-disabled-text);
}
.btn--secondary.btn--alt.is-loading{
  background-color: var(--alt-sec-loading);
  color: var(--alt-sec-loading-text);
}

/* ===== TERTIARY ALT ===== */
.btn--tertiary.btn--alt {
  background-color: var(--alt-ter-default);
  color: var(--alt-ter-default-text);
}
.btn--tertiary.btn--alt:hover {
  background-color: var(--alt-ter-hover);
  color: var(--alt-ter-hover-text);
}
.btn--tertiary.btn--alt:active {
  background-color: var(--alt-ter-pressed);
  color: var(--alt-ter-pressed-text);
}
.btn--tertiary.btn--alt:focus-visible{
  background-color: var(--alt-ter-focus);
  color: var(--alt-ter-focus-text);
  box-shadow:
    0 0 0 2px #124734,
    0 0 0 4px #ffffff;
}
.btn--tertiary.btn--alt:disabled{
  background-color: var(--alt-ter-disabled);
  color: var(--alt-ter-disabled-text);
}
.btn--tertiary.btn--alt.is-loading{
  background-color: var(--alt-ter-loading);
  color: var(--alt-ter-loading-text);
}

/* ======================================================
   ORANGE
====================================================== */

.btn--primary.btn--orange {
  background-color: var(--ora-pri-default);
  color: var(--ora-pri-default-text);
}
.btn--primary.btn--orange:hover {
  background-color: var(--ora-pri-hover);
  color: var(--ora-pri-hover-text);
}
.btn--primary.btn--orange:active {
  background-color: var(--ora-pri-pressed);
  color: var(--ora-pri-pressed-text);
}
.btn--primary.btn--orange:focus-visible{
  background-color: var(--ora-pri-focus);
  color: var(--ora-pri-focus-text);
  box-shadow:
    0 0 0 2px #FFFFFF,
    0 0 0 4px var(--ora-pri-focus);
}
.btn--primary.btn--orange:disabled{
  background-color: var(--ora-pri-disabled);
  color: var(--ora-pri-disabled-text);
}
.btn--primary.btn--orange.is-loading{
  background-color: var(--ora-pri-loading);
  color: var(--ora-pri-loading-text);
}



/*
  ANCHOR TAGS
  
*/

.anchor--s.anchor--default {
  color: var(--anchor-s-default);
}
.anchor--s.anchor--default:hover {
  color: var(--anchor-s-hover);
}
.anchor--s.anchor--s-disabled{
  color: var(--anchor-s-disabled);
  pointer-events: none;
  text-decoration: none;
  cursor: default;
}

.anchor--primary-disabled{
  background-color: var(--def-pri-disabled);
  color: var(--def-pri-disabled-text);
  pointer-events: none;
  text-decoration: none;
  cursor: default;
}