:root {
  --button-border-radius: 12px;
  --button-padding-v: 14px;
  --button-padding-h: 18px;
  --button-font-size: 15px;
  --button-line-height: 24px; /* should match icon */
}

.btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: var(--button-padding-v) var(--button-padding-h);
  border-radius: var(--button-border-radius);
  cursor: pointer;
}
.btn.ct-link, .btn.ct-div-block {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.btn > div {
  padding-top: 1px;
  font-family: "SuisseIntl";
  font-weight: 500;
  font-size: var(--button-font-size);
  line-height: calc(var(--button-line-height) - 1px);
}
.btn.btn-primary {
  background: var(--color-primary-flow-default);
}
.btn.btn-primary:hover {
  background: var(--color-primary-flow-700);
}
.btn.btn-primary > div {
  color: var(--color-primary-flow-100);
}
.btn.btn-primary > img {
  filter: invert(93%) sepia(11%) saturate(114%) hue-rotate(198deg) brightness(101%) contrast(95%);
}
.btn.btn-primary-light {
  background: var(--color-accent-light-default);
}
.btn.btn-primary-light:hover {
  background: var(--color-primary-flow-default);
}
.btn.btn-primary-light:hover > div {
  color: var(--color-neutral-100);
}
.btn.btn-primary-light:hover > img {
  filter: invert(99%) sepia(54%) saturate(226%) hue-rotate(264deg) brightness(108%) contrast(100%);
}
.btn.btn-primary-light > div {
  color: var(--color-neutral-default);
}
.btn.btn-primary-light > img {
  filter: invert(19%) sepia(12%) saturate(520%) hue-rotate(28deg) brightness(91%) contrast(86%);
}
.btn.btn-secondary {
  background: var(--color-primary-flow-100);
}
.btn.btn-secondary:hover {
  background: var(--color-primary-flow-200);
}
.btn.btn-secondary > div {
  color: var(--color-primary-flow-default);
}
.btn.btn-secondary > img {
  filter: invert(34%) sepia(70%) saturate(599%) hue-rotate(200deg) brightness(90%) contrast(96%);
}