.urovo-button {
  --button-u: min(0.0520833333vw, 1px);
  --button-font: 18;
  --button-font-min: 13px;
  --button-padding-y: 17;
  --button-padding-x: 30;
  --button-gap: 12;
  --button-icon-size: 20;
  --button-line-height: 1.4285714286;
  --button-font-weight: 600;
  --button-border-width: 1px;
  --button-bg: var(--primary);
  --button-fg: #fff;
  --button-fill: #fff;
  --button-hover-fg: var(--primary);
  --button-border: var(--button-bg);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--button-gap) * var(--button-u));
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  min-height: var(--button-min-height, 0px);
  box-sizing: border-box;
  padding: calc(var(--button-padding-y) * var(--button-u)) calc(var(--button-padding-x) * var(--button-u));
  border: var(--button-border-width) solid var(--button-border);
  border-radius: 999px;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  background: var(--button-bg);
  color: var(--button-fg);
  font-family: inherit;
  font-size: max(var(--button-font-min), calc(var(--button-font) * var(--button-u)));
  font-weight: var(--button-font-weight);
  line-height: var(--button-line-height);
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
}
.urovo-button--white {
  --button-bg: #fff;
  --button-fg: #173044;
  --button-fill: var(--primary);
  --button-hover-fg: #fff;
}
.urovo-button--outline {
  --button-border-width: 1px;
  --button-bg: transparent;
  --button-fg: var(--primary);
  --button-border: var(--primary);
  --button-fill: var(--primary);
  --button-hover-fg: #fff;
}
.urovo-button--outline-inverted {
  --button-border-width: 1px;
  --button-bg: transparent;
  --button-fg: #fff;
  --button-border: #fff;
  --button-fill: #fff;
  --button-hover-fg: #173044;
}
.urovo-button--text {
  --button-border-width: 0px;
  --button-border: transparent;
  --button-bg: transparent;
  --button-fg: #173044;
  --button-fill: #e5f6fd;
  --button-hover-fg: var(--primary);
  border-radius: 8px;
}
.urovo-button--small {
  --button-font: 14;
  --button-font-min: 12px;
  --button-padding-y: 10;
  --button-padding-x: 20;
  --button-gap: 8;
  --button-icon-size: 16;
  --button-line-height: 1.5;
}
.urovo-button--text-inverted {
  --button-fg: #fff;
}
.urovo-button--large {
  --button-gap: 14;
  --button-icon-size: 22;
  --button-font: 20;
  --button-font-min: 14px;
  --button-padding-y: 18;
  --button-padding-x: 38;
  --button-line-height: 1.5;
  --button-font-weight: 700;
}
.urovo-button--compact {
  --button-font: 16;
  --button-font-min: 13px;
  --button-padding-y: 0;
  --button-padding-x: 30;
  --button-gap: 12;
  --button-icon-size: 16;
  --button-line-height: 1;
  --button-min-height: max(34px, calc(42 * var(--button-u)));
  white-space: nowrap;
}
.urovo-button--text {
  --button-padding-y: 8;
  --button-padding-x: 0;
}
.urovo-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--button-fill);
  transform: scaleX(0) translateZ(0);
  transform-origin: left center;
  pointer-events: none;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.urovo-button--fill {
  transition: color 0.3s ease;
}
.urovo-button--fill::before {
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.urovo-button--fill:focus-visible {
  color: var(--button-hover-fg);
}
.urovo-button--fill:focus-visible::before {
  transform: scaleX(1) translateZ(0);
}
@media (hover: hover) and (pointer: fine) {
  .urovo-button--fill:not(.urovo-button--disabled):hover {
    color: var(--button-hover-fg);
  }
  .urovo-button--fill:not(.urovo-button--disabled):hover::before {
    transform: scaleX(1) translateZ(0);
  }
}
.urovo-button:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 4px;
}
.urovo-button--outline-inverted:focus-visible {
  outline-color: #fff;
}
.urovo-button__label {
  position: relative;
  z-index: 1;
}
.urovo-button__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 0 0 auto;
}
.urovo-button__icon svg {
  width: max(12px, calc(var(--button-icon-size) * var(--button-u)));
  height: max(12px, calc(var(--button-icon-size) * var(--button-u)));
  color: inherit;
}
.urovo-button--icon-first .urovo-button__icon {
  order: -1;
}
.urovo-button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
@media (max-width: 1023px) {
  .urovo-button {
    --button-u: 0.75px;
  }
}
@media (max-width: 639px) {
  .urovo-button--mobile-full {
    width: 100%;
  }
  .urovo-button--compact {
    --button-padding-x: 18;
  }
}

/* Icon appearance is independent of the button variant. */
.urovo-button__circle-arrow {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: max(18px, calc((var(--button-icon-size) + 2) * var(--button-u)));
  height: max(18px, calc((var(--button-icon-size) + 2) * var(--button-u)));
  overflow: hidden;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  transition: background-color 0.25s ease;
}
.urovo-button__circle-arrow > span {
  position: absolute;
  inset: 17.5%;
  width: 65%;
  height: 65%;
}
.urovo-button__arrow-incoming {
  transform: translateX(-160%);
}
.urovo-button .urovo-button__circle-arrow > span {
  transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}
.urovo-button:not(.urovo-button--disabled):focus-visible .urovo-button__arrow-current {
  transform: translateX(160%);
}
.urovo-button:not(.urovo-button--disabled):focus-visible .urovo-button__arrow-incoming {
  transform: translateX(0);
}
@media (hover: hover) and (pointer: fine) {
  .urovo-button:not(.urovo-button--disabled):hover .urovo-button__circle-arrow {
    background: #049fd5;
  }
  .urovo-button:not(.urovo-button--disabled):hover .urovo-button__arrow-current {
    transform: translateX(160%);
  }
  .urovo-button:not(.urovo-button--disabled):hover .urovo-button__arrow-incoming {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .urovo-button .urovo-button__circle-arrow > span {
    transition: none;
  }
}

.urovo-button__circle-arrow .urovo-icon,
.urovo-button__circle-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}