:root {
  --color-blue-120: #2068a3;
  --color-blue-100: #4a94d1;
  --color-white: #fff;
  --button-min-width: 15rem;
}

.c-button-primary {
  --button-bg-color: var(--color-blue-100);
  --button-border-color: var(--color-blue-100);
  --button-text-color: var(--color-white);
  --button-icon-color: var(--color-white);
  --button-hover-text-color: var(--color-blue-120);
  --button-hover-bg-color: color-mix(in srgb, #569bd3 10%, transparent);
  display: flex;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  min-inline-size: min(var(--button-min-width, 0), 100%);
}
.c-button-primary .button,
.c-button-primary a,
.c-button-primary button {
  align-items: center;
  background-color: var(--button-bg-color);
  border: 1px solid var(--button-border-color);
  border-radius: 5px;
  cursor: pointer;
  display: grid;
  gap: min(0.4081632653vw + 3.4693877551px, 10px);
  grid-template-columns: auto max-content;
  inline-size: 100%;
  padding-block: 10px;
  padding-inline: min(0.6530612245vw + 13.5510204082px, 24px);
  transition: 0.5s ease;
}
.c-button-primary .button .text,
.c-button-primary a .text,
.c-button-primary button .text {
  color: var(--button-text-color);
  font-size: min(0.2448979592vw + 0.7551020408rem, 1rem);
  text-align: center;
  transition: 0.5s ease;
}

.c-button-primary .button .icon,
.c-button-primary a .icon,
.c-button-primary button .icon {
  color: var(--button-icon-color);
  inline-size: 25px;
  line-height: 1;
  position: relative;
  transition: 0.5s ease;
}

.c-button-primary .button .icon svg,
.c-button-primary a .icon svg,
.c-button-primary button .icon svg {
  inline-size: 100%;
}