:root {
  --color-primary: #FF0055;
  --color-secondary: #0068FF;
  --color-third: #00E3B4;
  --color-heading: #2E3F58;
}

.highlight::selection {
  background-color: var(--color-third);
}

.bg-color-primary {
  background-color: var(--color-primary);

  &.active:active {
    background-color: var(--color-secondary);
  }
  &.hover:hover:not(:active) {
    background-color: #202B3C;
  }
  &.reverse {
    background-color: var(--color-secondary);
  }
}

.bg-color-secondary {
  background-color: var(--color-secondary);

  &.active:active {
    background-color: var(--color-primary);
  }
  &.hover:hover:not(:active) {
    background-color: #202B3C;
  }
  &.reverse {
    background-color: var(--color-primary);
  }
}

.bg-color-third {
  background-color: var(--color-third);

  &.active:active {
    background-color: var(--color-heading);
  }
  &.hover:hover:not(:active) {
    background-color: #202B3C;
  }
  &.reverse {
    background-color: var(--color-heading);
  }
}

.bg-color-heading {
  background-color: var(--color-heading);

  &.active:active {
    background-color: var(--color-third);
  }
  &.hover:hover:not(:active) {
    background-color: #202B3C;
  }
  &.reverse {
    background-color: var(--color-third);
  }
}

.bg-color-white {
  background: white;
}

.text-color-primary {
  color: var(--color-primary);

  &.active:active {
    color: var(--color-secondary);
  }
  &.reverse {
    color: var(--color-secondary);
  }
}

.text-color-secondary {
  color: var(--color-secondary);

  &.active:active {
    color: var(--color-primary);
  }
  &.reverse {
    color: var(--color-primary);
  }
}

.text-color-third {
  color: var(--color-third);

  &.active:active {
    color: var(--color-heading);
  }
  &.reverse {
    color: var(--color-heading);
  }
}

.text-color-heading {
  color: var(--color-heading);

  &.active:active {
    color: white;
  }
  &.reverse {
    color: var(--color-third);
  }
}

.text-color-white {
  color: white;
}

.text-hover:hover {
  color: var(--color-secondary);
}