/* Buttons */

/* Primary */

.cta-btn--primary-fill {
  background-color: var(--btn--primary-bg);
  border-color: var(--btn--primary-bg);
  color: var(--btn--primary-fg);
}
.cta-btn--primary-fill:focus,
.cta-btn--primary-fill:hover {
  background-color: var(--btn--white-fg);
  border-color: var(--btn--white-fg);
  color: var(--btn--primary-bg);
}

.dark-mode .cta-btn--primary-fill {
  background-color: var(--btn--primary-bg);
  border-color: var(--btn--primary-bg);
  color: var(--btn--primary-fg);
}
.dark-mode .cta-btn--primary-fill:focus,
.dark-mode .cta-btn--primary-fill:hover {
  background-color: var(--btn--secondary-bg);
  border-color: var(--btn--secondary-bg);
  color: var(--btn--primary-bg);
}

.cta-btn--primary-outline {
  background-color: transparent;
  border-color: var(--btn--primary-stroke);
  color: var(--btn--primary-stroke);
}
.cta-btn--primary-outline:focus,
.cta-btn--primary-outline:hover {
  background-color: var(--btn--primary-bg);
  border-color: var(--btn--primary-bg);
  background-color: var(--btn--primary-bg);
}

.dark-mode .cta-btn--primary-outline {
  background-color: transparent;
  border-color: var(--btn--primary-stroke);
  color: var(--btn--primary-stroke);
}
.dark-mode .cta-btn--primary-outline:focus,
.dark-mode .cta-btn--primary-outline:hover {
  background-color: var(--btn--white-bg);
  border-color: var(--btn--white-bg);
  color: var(--btn--primary-bg);
}

/* Secondary */

.cta-btn--secondary,
.cta-btn--secondary-fill {
  background-color: var(--btn--secondary-bg);
  border-color: var(--btn--secondary-bg);
  color: var(--btn--primary-bg);
}
.cta-btn--secondary:focus,
.cta-btn--secondary:hover,
.cta-btn--secondary-fill:focus,
.cta-btn--secondary-fill:hover {
  background-color: var(--btn--secondary-bg-hover);
  border-color: var(--btn--secondary-bg-hover);
  color: var(--btn--secondary-fg-hover);
}

.dark-mode .cta-btn--secondary,
.dark-mode .cta-btn--secondary-fill {
  background-color: var(--btn--secondary-bg);
  border-color: var(--btn--secondary-bg);
  color: var(--btn--primary-bg);
}
.dark-mode .cta-btn--secondary:focus,
.dark-mode .cta-btn--secondary:hover,
.dark-mode .cta-btn--secondary-fill:focus,
.dark-mode .cta-btn--secondary-fill:hover {
  background-color: var(--btn--secondary-bg-hover);
  border-color: var(--btn--secondary-bg-hover);
  color: var(--btn--secondary-fg-hover);
}

.cta-btn--secondary-outline {
  background-color: transparent;
  border-color: var(--btn--secondary-bg);
  color: var(--btn--secondary-bg);
}
.cta-btn--secondary-outline:focus,
.cta-btn--secondary-outline:hover {
  background-color: var(--btn--secondary-bg);
  border-color: var(--btn--secondary-bg);
  color: color: var(--btn--tertiary-fg);
}

.dark-mode .cta-btn--secondary-outline {
  background-color: transparent;
  border-color: var(--btn--primary-stroke);
  color: var(--btn--primary-stroke);
}
.dark-mode .cta-btn--secondary-outline:focus,
.dark-mode .cta-btn--secondary-outline:hover {
  background-color: var(--btn--white-bg);
  border-color: var(--btn--white-bg);
  color: var(--btn--tertiary-fg);
}

/* Tertiary */

.cta-btn--tertiary-fill {
  background-color: var(--btn--tertiary-bg);
  border-color: var(--btn--tertiary-bg);
  color: var(--btn--tertiary-fg);
}
.cta-btn--tertiary-fill:focus,
.cta-btn--tertiary-fill:hover {
  background-color: var(--btn--tertiary-bg-hover);
  border-color: var(--btn--tertiary-bg-hover);
  color: var(--btn--primary-fg);
}

.dark-mode .cta-btn--tertiary-fill {
  background-color: var(--btn--tertiary-bg);
  border-color: var(--btn--tertiary-bg);
  color: var(--btn--tertiary-fg);
}
.dark-mode .cta-btn--tertiary-fill:focus,
.dark-mode .cta-btn--tertiary-fill:hover {
  background-color: var(--btn--secondary-bg);
  border-color: var(--btn--secondary-bg);
  color: var(--btn--primary-bg);
}

.cta-btn--tertiary-outline {
  background-color: transparent;
  border-color: var(--btn--tertiary-bg);
  color: var(--btn--primary-bg);
}
.cta-btn--tertiary-outline:focus,
.cta-btn--tertiary-outline:hover {
  background-color: var(--btn--tertiary-bg);
  border-color: var(--btn--tertiary-bg);
  color: var(--btn--primary-bg);
}

.dark-mode .cta-btn--tertiary-outline {
  background-color: transparent;
  border-color: var(--btn--tertiary-bg);
  color: var(--btn--tertiary-bg);
}
.dark-mode .cta-btn--tertiary-outline:focus,
.dark-mode .cta-btn--tertiary-outline:hover {
  background-color: var(--btn--tertiary-bg);
  border-color: var(--btn--tertiary-bg);
  color: var(--btn--primary-bg);
}

/* White */

.cta-btn--white-fill {
  background-color: var(--btn--white-bg);
  border-color: var(--btn--white-bg);
  color: var(--btn--primary-bg);
}
.cta-btn--white-fill:focus,
.cta-btn--white-fill:hover {
  background-color: var(--btn--primary-bg);
  border-color: var(--btn--primary-bg);
  color: var(--btn--white-bg);
}

.dark-mode .cta-btn--white-fill {
  background-color: var(--btn--white-bg);
  border-color: var(--btn--white-bg);
  color: var(--btn--primary-bg);
}
.dark-mode .cta-btn--white-fill:focus,
.dark-mode .cta-btn--white-fill:hover {
  background-color: var(--btn--primary-bg);
  border-color: var(--btn--white-bg);
  color: var(--btn--white-bg);
}

.cta-btn--white-outline {
  background-color: transparent;
  border-color: var(--btn--white-bg);
  color: var(--btn--primary-bg);
}
.cta-btn--white-outline:focus,
.cta-btn--white-outline:hover {
  background-color: var(--btn--primary-bg);
  border-color: var(--btn--primary-bg);
  color: var(--btn--white-bg);
}

.dark-mode .cta-btn--white-outline {
  background-color: transparent;
  border-color: var(--btn--white-bg);
  color: var(--btn--white-bg);
}
.dark-mode .cta-btn--white-outline:focus,
.dark-mode .cta-btn--white-outline:hover {
  background-color: var(--btn--white-bg);
  border-color: var(--btn--white-bg);
  color: var(--btn--primary-bg) !important;
}

/* Icons */

.column-card__icon--hubspot .hs_cos_wrapper_type_icon {
  background-color: var(--secondary--medium);
}
.column-card__icon--hubspot .hs_cos_wrapper_type_icon path {
  fill: var(--neutral--white);
}