.button {
  border-width: 0.25rem;
  border-style: solid;
  border-radius: var(--button-border-radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  line-height: 1;
  padding: var(--spacing-2) var(--spacing-4);
  transition: background 0.25s ease-in-out,
  color 0.1s ease-in-out,
  opacity 0.2s ease-in-out,
  transform 0.2s ease-in-out;
  font-weight: 600;
}

/* Button icon. */
.button--icon {
  position: relative;
  padding-inline-end: var(--spacing-9);
}

.button__icon {
  background-color: var(--c-primary-orange);
  border-radius: 50%;
  position: absolute;
  content: '';
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  right: 0;
}

.button--icon-before {
  padding: 0 var(--spacing-2) 0 0;

  .button__icon {
    position: static;
    margin-right: var(--spacing-3);
  }
}

.button__icon .icon {
  height: 1.5rem;
  width: 1.5rem;
}

.button--solid {
  display: flex;
  background: var(--c-primary-light);
  color: var(--c-primary-dark);
  border: none;
  padding: var(--spacing-1-5) var(--spacing-3);
  gap: var(--spacing);

  .button__icon {
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
    position: static;
    color: var(--c-primary-blue);
    background: unset;
    margin: 0;
  }
}

.button--solid:hover {
  background: var(--c-primary-dark);
  color: var(--c-primary-light);

  .button__icon {
    color: var(--c-primary-orange);
  }
}

.button--solid-secondary {
  display: flex;
  background: var(--c-primary-dark);
  color: var(--c-primary-light);
  border: none;
  padding: var(--spacing-1-5) var(--spacing-3);
  gap: var(--spacing);

  .button__icon {
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
    position: static;
    color: var(--c-primary-orange);
    background: unset;
    margin: 0;
  }
}

.button--solid-secondary:hover {
  background: var(--c-primary-blue);
  color: var(--c-primary-light);
}

/* Primary buttons */
.button--primary {
  background-color: var(--bg-light);
  border-color: var(--button-primary-bg);
  color: var(--button-primary-color);

  .button__icon {
    color: var(--c-body-primary);
  }
}

.button--primary:visited {
  color: var(--button-primary-color);
}

.button--primary.button:hover {
  color: var(--c-body-primary);
}

.button--primary.button:hover .button__icon {
  background: var(--c-body-primary);
  color: var(--c-body-invert);
}

/* Secondary buttons */
.button--secondary {
  background-color: var(--button-secondary-bg);
  border-color: var(--button-secondary-bg);
  color: var(--button-secondary-color);

  .button__icon {
    color: var(--c-body-primary);
  }
}

.button--secondary:visited {
  color: var(--button-secondary-color);
}

.button--secondary.button:hover {
  color: var(--c-body-invert);
}

.button--secondary.button:hover .button__icon {
  background: var(--bg-light);
  color: var(--c-body-primary);
}

/* Tertiary buttons */
.button--tertiary {
  background-color: var(--button-tertiary-bg);
  border-color: var(--button-tertiary-bg);
  color: var(--button-tertiary-color);

  .button__icon {
    background: var(--bg-dark);
    color: var(--c-body-invert);
  }
}

.button--tertiary:hover {
  border-color: var(--c-primary-dark);
  background: var(--c-primary-dark);
  color: var(--c-primary-light);
}

.button--tertiary:hover:visited {
  color: var(--button-tertiary-color);
}

.button--tertiary.button:hover .button__icon {
  background: var(--c-primary-orange);
  color: var(--c-body-primary);
}

.button--link {
  text-decoration: none;
}

.button--link:hover,
.button--link:focus-visible,
.button--link:active,
.button--link:visited {
  text-decoration: none;
}

/* Clean buttons (no styles). */
.button--clean {
  background: unset;
  border: unset;
  border-radius: unset;
  padding: 0;
  padding-inline-end: 0;

  .button__icon {
    background: unset;
    position: static;
  }
}

.button--clean:hover {
  background: unset;
}

.button--clean:hover.button--icon .button__icon {
  background: unset;
}