/*******************************
 Utilities
 ******************************/

.push-right .svg {
  transform: translateX(0);
  /* easeOutQuint - https://easings.net/#easeOutQuint */
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.push-right:hover svg,
.push-right:active .svg {
  transform: translateX(0.75rem);
}

.push-left .svg {
  transform: translateX(0);
  /* easeOutQuint - https://easings.net/#easeOutQuint */
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.push-left:hover svg,
.push-left:active .svg {
  transform: translateX(-0.75rem);
}

/*******************************
 Link Components
 ******************************/

.text-link,
a.text-link,
a.text-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: initial;
  color: rgb(var(--light-text-primary));
}

.text-link svg,
a.text-link .svg {
  width: 1.5rem;
  height: 1.5rem;
}

.text-link:hover,
a.text-link:hover {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: var(--border-width);
}

.text-link:active,
a.text-link:active {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: initial;
}

.text-link--dark,
a.text-link--dark,
a.text-link--dark:visited {
  color: rgb(var(--dark-text-primary));
}

.text-link--dark-tertiary,
a.text-link--dark-tertiary,
a.text-link--dark-tertiary:visited {
  color: rgb(var(--dark-text-tertiary));
}

.text-link--dark-secondary,
a.text-link--dark-secondary,
a.text-link--dark-secondary:visited {
  color: rgb(var(--dark-text-secondary));
}

.text-link--dark-primary,
a.text-link--dark-primary,
a.text-link--dark-primary:visited {
  color: rgb(var(--dark-text-primary));
}

.text-link--mineral,
a.text-link--mineral,
a.text-link--mineral:visited {
  color: rgb(var(--mineral-text-primary));
}

.text-link--bold,
a.text-link--bold,
a.text-link--bold:visited {
  color: rgb(var(--light-button-link-default-text));
}

.text-link--bold--dark,
a.text-link--bold--dark,
a.text-link--bold--dark:visited {
  color: rgb(var(--dark-button-link-default-text));
}

.text-link--bold--mineral,
a.text-link--bold--mineral,
a.text-link--bold--mineral:visited {
  color: rgb(var(--mineral-button-link-default-text));
}

.text-link--bare,
a.text-link--bare,
a.text-link--bare:visited {
  text-decoration: none;
}

/*******************************
 Button Components
 ******************************/

/* Base */
.button,
a.button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border-radius: var(--border-radius);
  padding-block: 8px;
  padding-inline: 24px;

  background-color: rgb(var(--light-button-primary-default-background));
  color: rgb(var(--light-button-primary-default-text));

  /* Mono1 */
  font-size: 16px;
  font-family: "JetBrains Mono", sans-serif;
  font-weight: 400;
  line-height: 100%;
}

.button .svg {
  width: 1.5rem;
  height: 1.5rem;
}

.button:hover,
a.button:hover {
  background-color: rgb(var(--light-button-primary-hover-background));
  color: rgb(var(--light-button-primary-hover-text));
}

.button:active,
a.button:active {
  background-color: rgb(var(--light-button-primary-active-background));
  color: rgb(var(--light-button-primary-active-text));
}

/* Height Variants */
.button--short {
  padding-block: 4px;
}
.button--tall {
  padding-block: 12px;
}

/* Width Variants */
.button--narrow {
  padding-inline: 8px;
}
.button--wide {
  padding-inline: 36px;
}
.button--full{
    width: 100%;
}

/*******************************
 Button Light (Default) Theme
 ******************************/

/* Light (Default) Base */
.button--primary,
a.button--primary {
  background-color: rgb(var(--light-button-primary-default-background));
  color: rgb(var(--light-button-primary-default-text));
}
.button--secondary,
a.button--secondary {
  background-color: rgb(var(--light-button-secondary-default-background));
  color: rgb(var(--light-button-secondary-default-text));
}
.button--tertiary,
a.button--tertiary {
  background-color: transparent;
  border: 1px solid rgb(var(--light-button-tertiary-default-border));
  color: rgb(var(--light-button-tertiary-default-text));
}
.button--ghost,
a.button--ghost {
  background-color: transparent;
  color: rgb(var(--light-button-ghost-default-text));
}
.button--link,
a.button--link {
  background-color: transparent;
  color: rgb(var(--light-button-link-default-text));
}
/* Light (Default) Hover */
.button--primary:hover,
a.button--primary:hover {
  background-color: rgb(var(--light-button-primary-hover-background));
  color: rgb(var(--light-button-primary-hover-text));
}
.button--secondary:hover,
a.button--secondary:hover {
  background-color: rgb(var(--light-button-secondary-hover-background));
  color: rgb(var(--light-button-secondary-hover-text));
}
.button--tertiary:hover,
a.button--tertiary:hover {
  background-color: transparent;
  border-color: rgb(var(--light-button-tertiary-hover-border));
  color: rgb(var(--light-button-tertiary-hover-text));
}
.button--ghost:hover,
a.button--ghost:hover {
  background-color: rgb(var(--light-button-ghost-hover-background) / 0.05);
  color: rgb(var(--light-button-ghost-hover-text));
}
.button--link:hover,
a.button--link:hover {
  background-color: rgb(var(--light-button-link-hover-background) / 0.05);
  color: rgb(var(--light-button-link-hover-text));
}
/* Light (Default) Active */
.button--primary:active,
a.button--primary:active {
  background-color: rgb(var(--light-button-primary-active-background));
  color: rgb(var(--light-button-primary-active-text));
}
.button--secondary:active,
a.button--secondary:active {
  background-color: rgb(var(--light-button-secondary-active-background));
  color: rgb(var(--light-button-secondary-active-text));
}
.button--tertiary:active,
a.button--tertiary:active {
  background-color: transparent;
  border-color: rgb(var(--light-button-tertiary-active-border));
  color: rgb(var(--light-button-tertiary-active-text));
}
.button--ghost:active,
a.button--ghost:active {
  background-color: rgb(var(--light-button-ghost-active-background) / 0.1);
  color: rgb(var(--light-button-ghost-active-text));
}
.button--link:active,
a.button--link:active {
  background-color: rgb(var(--light-button-link-active-background) / 0.1);
  color: rgb(var(--light-button-link-active-text));
}

/*******************************
 Button Dark Theme
 ******************************/

/* Dark Base */
.button--primary--dark,
a.button--primary--dark {
  background-color: rgb(var(--dark-button-primary-default-background));
  color: rgb(var(--dark-button-primary-default-text));
}
.button--secondary--dark,
a.button--secondary--dark {
  background-color: rgb(var(--dark-button-secondary-default-background));
  color: rgb(var(--dark-button-secondary-default-text));
}
.button--tertiary--dark,
a.button--tertiary--dark {
  background-color: transparent;
  border: 1px solid rgb(var(--dark-button-tertiary-default-border));
  color: rgb(var(--dark-button-tertiary-default-text));
}
.button--ghost--dark,
a.button--ghost--dark {
  background-color: transparent;
  color: rgb(var(--dark-button-ghost-default-text));
}
.button--link--dark,
a.button--link--dark {
  background-color: transparent;
  color: rgb(var(--dark-button-link-default-text));
}
/* Dark Hover */
.button--primary--dark:hover,
a.button--primary--dark:hover {
  background-color: rgb(var(--dark-button-primary-hover-background));
  color: rgb(var(--dark-button-primary-hover-text));
}
.button--secondary--dark:hover,
a.button--secondary--dark:hover {
  background-color: rgb(var(--dark-button-secondary-hover-background));
  color: rgb(var(--dark-button-secondary-hover-text));
}
.button--tertiary--dark:hover,
a.button--tertiary--dark:hover {
  background-color: transparent;
  border-color: rgb(var(--dark-button-tertiary-hover-border));
  color: rgb(var(--dark-button-tertiary-hover-text));
}
.button--ghost--dark:hover,
a.button--ghost--dark:hover {
  background-color: rgb(var(--dark-button-ghost-hover-background) / 0.05);
  color: rgb(var(--dark-button-ghost-hover-text));
}
.button--link--dark:hover,
a.button--link--dark:hover {
  background-color: rgb(var(--dark-button-link-hover-background) / 0.05);
  color: rgb(var(--dark-button-link-hover-text));
}
/* Dark Active */
.button--primary--dark:active,
a.button--primary--dark:active {
  background-color: rgb(var(--dark-button-primary-active-background));
  color: rgb(var(--dark-button-primary-active-text));
}
.button--secondary--dark:active,
a.button--secondary--dark:active {
  background-color: rgb(var(--dark-button-secondary-active-background));
  color: rgb(var(--dark-button-secondary-active-text));
}
.button--tertiary--dark:active,
a.button--tertiary--dark:active {
  background-color: transparent;
  border-color: rgb(var(--dark-button-tertiary-active-border));
  color: rgb(var(--dark-button-tertiary-active-text));
}
.button--ghost--dark:active,
a.button--ghost--dark:active {
  background-color: rgb(var(--dark-button-ghost-active-background) / 0.1);
  color: rgb(var(--dark-button-ghost-active-text));
}
.button--link--dark:active,
a.button--link--dark:active {
  background-color: rgb(var(--dark-button-link-active-background) / 0.1);
  color: rgb(var(--dark-button-link-active-text));
}

/*******************************
 Button Mineral Theme
 ******************************/

/* Mineral Base */
.button--primary--mineral,
a.button--primary--mineral {
  background-color: rgb(var(--mineral-button-primary-default-background));
  color: rgb(var(--mineral-button-primary-default-text));
}
.button--secondary--mineral,
a.button--secondary--mineral {
  background-color: rgb(var(--mineral-button-secondary-default-background) / 0.35);
  color: rgb(var(--mineral-button-secondary-default-text));
}
.button--tertiary--mineral,
a.button--tertiary--mineral {
  background-color: transparent;
  border: 1px solid rgb(var(--mineral-button-tertiary-default-border));
  color: rgb(var(--mineral-button-tertiary-default-text));
}
.button--ghost--mineral,
a.button--ghost--mineral {
  background-color: transparent;
  color: rgb(var(--mineral-button-ghost-default-text));
}
.button--link--mineral,
a.button--link--mineral {
  background-color: transparent;
  color: rgb(var(--mineral-button-link-default-text));
}
/* Mineral Hover */
.button--primary--mineral:hover,
a.button--primary--mineral:hover {
  background-color: rgb(var(--mineral-button-primary-hover-background));
  color: rgb(var(--mineral-button-primary-hover-text));
}
.button--secondary--mineral:hover,
a.button--secondary--mineral:hover {
  background-color: rgb(var(--mineral-button-secondary-hover-background) / 0.45);
  color: rgb(var(--mineral-button-secondary-hover-text));
}
.button--tertiary--mineral:hover,
a.button--tertiary--mineral:hover {
  background-color: transparent;
  border-color: rgb(var(--mineral-button-tertiary-hover-border));
  color: rgb(var(--mineral-button-tertiary-hover-text));
}
.button--ghost--mineral:hover,
a.button--ghost--mineral:hover {
  background-color: rgb(var(--mineral-button-ghost-hover-background) / 0.1);
  color: rgb(var(--mineral-button-ghost-hover-text));
}
.button--link--mineral:hover,
a.button--link--mineral:hover {
  background-color: rgb(var(--mineral-button-link-hover-background) / 0.1);
  color: rgb(var(--mineral-button-link-hover-text));
}
/* Mineral Active */
.button--primary--mineral:active,
a.button--primary--mineral:active {
  background-color: rgb(var(--mineral-button-primary-active-background));
  color: rgb(var(--mineral-button-primary-active-text));
}
.button--secondary--mineral:active,
a.button--secondary--mineral:active {
  background-color: rgb(var(--mineral-button-secondary-active-background) / 0.25);
  color: rgb(var(--mineral-button-secondary-active-text));
}
.button--tertiary--mineral:active,
a.button--tertiary--mineral:active {
  background-color: transparent;
  border-color: rgb(var(--mineral-button-tertiary-active-border));
  color: rgb(var(--mineral-button-tertiary-active-text));
}
.button--ghost--mineral:active,
a.button--ghost--mineral:active {
  background-color: rgb(var(--mineral-button-ghost-active-background) / 0.2);
  color: rgb(var(--mineral-button-ghost-active-text));
}
.button--link--mineral:active,
a.button--link--mineral:active {
  background-color: rgb(var(--mineral-button-link-active-background) / 0.2);
  color: rgb(var(--mineral-button-link-active-text));
}