.reboat-button {
  padding: 25px 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  font-size: 18px;
  line-height: 18px;
  text-align: center;
}

.reboat-button--main {
  color: var(--color-text-main);
  border: 1px solid var(--color-borders-alt);
}

.reboat-button--outline,
.reboat-button--inverse {
  min-height: 44px;
  padding: 12px 20px;
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
  color: var(--color-blue);
  border: 1px solid currentColor;
  transition: background-color 180ms ease, color 180ms ease;
}

.reboat-button--outline:hover,
.reboat-button--outline:focus-visible {
  color: var(--color-background-main);
  background-color: var(--color-blue);
  border-color: var(--color-blue);
}

.reboat-button--inverse {
  color: var(--color-white);
  border-color: var(--color-white);
}

.reboat-button--inverse:hover,
.reboat-button--inverse:focus-visible {
  color: var(--color-brand-blue);
  background-color: var(--color-white);
  border-color: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  .reboat-button--outline,
  .reboat-button--inverse {
    transition: none;
  }
}

.reboat-button--header-cta {
  min-height: 60px;
  padding: 18px 24px;
  font-size: 16px;
  color: var(--color-white);
  border: 1px solid var(--color-white);
  white-space: nowrap;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.reboat-button--header-cta:hover,
.reboat-button--header-cta:focus-visible {
  color: var(--color-brand-blue);
  border-color: var(--color-white);
  background-color: var(--color-white);
}

@media screen and (width <= 600px) {
  .reboat-button--header-cta {
    min-height: 44px;
    padding: 12px 14px;
    font-size: 13px;
  }
}

@media screen and (width <= 480px) {
  .reboat-button--header-cta {
    min-height: 40px;
    padding: 10px;
    font-size: 12px;
  }
}