.nexods-button {
  border: none;
  display: flex;
  padding: var(--space-padding-md-8, 8px);
  justify-content: center;
  align-items: center;
  font-style: normal;
  font-weight: 400;
  font-family: var(--typeface-font-family-secondary, Inter);
  border-radius: var(--space-border-radius-sm-4, 4px);
  font-size: var(--typeface-font-size-extra-quote, 14px);
  color: var(--color-txt-on-button, #FFF);
  width: fit-content;
}

/* BUTTON SPACING */
.nexods-button {
  gap: var(--space-gap-gap-050, 4px);
  padding: var(--space-padding-md-8, 8px);
  line-height: var(--typeface-line-height-extra-quote, 16px);
  line-height: var(--typeface-line-height-extra-quote, 16px);
  font-size: var(--typeface-font-size-extra-quote, 14px);
}
.nexods-button.nexods-button--small {
  padding: var(--space-padding-xs-2, 2px) var(--space-padding-md-8, 8px);
  gap: var(--space-gap-gap-050, 4px);
}

.nexods-button.nexods-button--large {
  padding: var(--space-padding-lg-16, 16px) var(--space-padding-xl-24, 24px);
  gap: var(--space-gap-gap-050, 4px);
  line-height: var(--typeface-line-height-extra-quote, 16px);
}

/* VARIANTS & STATES */
.nexods-button.nexods-button:disabled:hover {
  cursor: not-allowed;
}
.nexods-button:focus {
  border-radius: 6px;
  outline: var(--space-0252, 2px) solid var(--color-border-focus, #ca771b);
  outline-width: 2;
}

/* PRIMARY */
.nexods-button.nexods-button--primary {
  background: var(--color-bg-interactive, #0053cf);
}
.nexods-button.nexods-button--primary:hover {
  background: var(--color-bg-hover, #003d9e);
}
.nexods-button.nexods-button--primary:active {
  background: var(--color-bg-press, #002970);
}
.nexods-button.nexods-button--primary:disabled {
  background: var(--color-bg-disable, #cfd3d8);
  color: var(--color-txt-disable, #6e8094);
}

/* SECONDARY */
.nexods-button.nexods-button--secondary {
  color: var(--color-txt-interactive, #0053CF);
  border: var(--space-0121, 1px) solid var(--color-border-interactive, #0268ff);
  background: var(--color-bg-surface, #fff);
}
.nexods-button.nexods-button--secondary:hover {
  background: var(--color-bg-surface, #fff);
  color: var(--color-txt-hover, #003d9e);
}
.nexods-button.nexods-button--secondary:active {
  color: var(--color-txt-on-button, #fff);
  background: var(--color-bg-press, #002970);
}
.nexods-button.nexods-button--secondary:disabled {
  background: var(--color-bg-surface, #fff);
  color: var(--color-txt-disable, #6e8094);
  border: var(--space-0121, 1px) solid var(--color-border-disable, #cfd3d8);
}

/* NEUTRAL */

.nexods-button.nexods-button--neutral {
  color: var(--color-txt-interactive, #0053cf);
}

.nexods-button.nexods-button--neutral:hover {
  background: var(--color-bg-destructive-hover, #840026);
  color: var(--color-txt-hover, #003d9e);
}
.nexods-button.nexods-button--neutral:active {
  color: var(--color-txt-press, #002970);
}
.nexods-button.nexods-button--neutral:disabled {
  color: var(--color-txt-disable, #6e8094);
}

/* DESTRUCTIVE */
.nexods-button.nexods-button--destructive {
  background: var(--color-bg-destructive, #b40038);
  color: var(--color-txt-on-button, #fff);
}

.nexods-button.nexods-button--destructive:hover {
  background: var(--color-bg-destructive-hover, #840026);
  color: var(--color-txt-on-button, #fff);
}

.nexods-button.nexods-button--destructive:active {
  background: var(--color-bg-destructive-press, #530017);
  color: var(--color-txt-on-button, #fff);
}
.nexods-button.nexods-button--destructive:disabled {
  background: var(--color-bg-surface, #fff);
  color: var(--color-txt-disable, #6e8094);
  border: var(--space-0121, 1px) solid var(--color-border-disable, #cfd3d8);
}


 /* TODO: benicassim-button class is beign added for exceptional customizing: remove on Design system alignment boilerplate */

 .nexods-button.benicassim-button {
  border-radius: 0;
 }
.nexods-button.benicassim-button.nexods-button--primary {
  padding: var(--space-padding-lg-16, 16px) var(--space-padding-xl-24, 24px);
  gap: var(--space-gap-gap-050, 4px);
  line-height: var(--typeface-line-height-extra-quote, 16px);
  background-color: var(--nexo-color-secondary);
  color: black;
}
.nexods-button.benicassim-button.nexods-button--primary  .nexods-button__text {
  color: var(--color-txt-on-button, #000);
text-align: center;

/* extra/interactive */
font-family: var(--extra-interactive-font-family-interactive, "Trade Gothic");
font-size: var(--extra-interactive-font-size-interactive, 14px);
font-style: normal;
font-weight: 700;
line-height: var(--extra-interactive-line-height-interactive, 18px); /* 128.571% */

}