.button {
  color: var(--btn-color, var(--color-primary));
  background-color: var(--btn-background-color, var(--color-white));
  border-color: var(--btn-border-color, var(--color-primary));
  border-width: var(--btn-border-width, 1px);
  border-style: var(--btn-border-style, solid);
  border-radius: var(--btn-border-radius, 4px);
  font-size: var(--btn-font-size, var(--font-size-base));
  font-weight: var(--font-weight-bold);
  line-height: var(--btn-line-height, var(--font-size-base));
  padding-block: 8px;
  padding-inline: 24px;
  cursor: pointer;
  text-align: center;
}

.button.small {
  padding-block: 4px;
  padding-inline: 8px;
}

.button > span {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.button[aria-disabled="true"] {
  color: var(--btn-disabled-color, var(--color-white));
  background-color: var(
    --btn-disabled-background-color,
    var(--color-primary-lighter)
  );
  border-color: var(--btn-disabled-border-color, var(--color-primary-lighter));
}

.button:hover:not([aria-disabled="true"]) {
  background-color: var(
    --btn-hover-background-color,
    var(--color-primary-dark)
  );
  border-color: var(--btn-hover-border-color, var(--color-primary-dark));
}

.button:focus {
  border-color: var(--btn-focus-border-color, var(--color-primary));
}

.button:active:not([aria-disabled="true"]) {
  background-color: var(
    --btn-active-background-color,
    var(--color-primary-darker)
  );
  border-color: var(--btn-active-border-color, var(--color-primary-darker));
}

.button.primary {
  --btn-color: var(--color-white);
  --btn-background-color: var(--color-primary);
  --btn-border-color: var(--color-primary);
  --btn-disabled-color: var(--color-white);
  --btn-disabled-background-color: var(--color-primary-lighter);
  --btn-disabled-border-color: var(--color-primary-lighter);
  --btn-hover-background-color: var(--color-primary-dark);
  --btn-hover-border-color: var(--color-primary-dark);
  --btn-active-border-color: var(--color-primary-darker);
  --btn-active-background-color: var(--color-primary-darker);
  --btn-focus-border-color: var(--color-primary);
}

.button.secondary {
  --btn-color: var(--color-base-darkest);
  --btn-background-color: var(--color-white);
  --btn-border-color: var(--color-base-darkest);
  --btn-disabled-color: var(--color-base-light);
  --btn-disabled-background-color: var(--color-white);
  --btn-disabled-border-color: var(--color-base-light);
  --btn-hover-background-color: var(--color-base-lightest);
  --btn-hover-border-color: var(--btn-border-color);
  --btn-active-background-color: var(--color-base-lighter);
  --btn-focus-border-color: var(--color-primary);
}

.button.tertiary {
  --btn-color: var(--color-base-darkest);
  --btn-background-color: var(--color-base-lightest);
  --btn-border-color: var(--color-base-lightest);
  --btn-disabled-color: var(--color-base-light);
  --btn-disabled-background-color: var(--color-base-lightest);
  --btn-disabled-border-color: var(--color-base-lightest);
  --btn-hover-background-color: var(--color-base-lighter);
  --btn-hover-border-color: var(--color-base-lighter);
  --btn-active-background-color: var(--color-base-lighter);
  --btn-active-border-color: var(--color-primary-light);
  --btn-focus-border-color: var(--color-primary);
}

.button.destructive {
  --btn-color: var(--color-white);
  --btn-background-color: var(--color-danger);
  --btn-border-color: var(--color-danger);
  --btn-disabled-background-color: var(--color-danger-lighter);
  --btn-disabled-border-color: var(--color-danger-lighter);
  --btn-hover-background-color: var(--color-danger-dark);
  --btn-hover-border-color: var(--color-danger-dark);
  --btn-active-background-color: var(--color-danger-darker);
  --btn-focus-border-color: var(--color-primary);
}

.text-button {
  color: var(--color-primary);
  background-color: transparent;
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  line-height: var(--font-lh-base);
  padding: 0;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.text-button.small {
  font-size: var(--font-size-base);
}

.text-button > span {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.text-button[aria-disabled="true"] {
  color: var(--color-primary-lighter);
}

.text-button:hover:not([aria-disabled="true"]) {
  text-decoration: underline;
}

.text-button:focus:not([aria-disabled="true"]) {
  text-decoration: underline;
}

.text-button:active:not([aria-disabled="true"]) {
  text-decoration: underline;
  color: var(--color-primary-dark);
}