.button,
.c-button {
  font-size: var(--crp-fs-body-base);
  line-height: var(--crp-lh-body-base);
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--crp-ff-body);
  font-weight: var(--crp-fw-regular);
  gap: 4px;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  justify-content: center;
  overflow: hidden;
  padding: 0.5rem 1rem;
  position: relative;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: all 0.25s var(--transition-easeInOutQuad);
  width: -moz-fit-content;
  width: fit-content;
}
@media (min-width: 768px) {
  .button:has(.c-icon),
  .c-button:has(.c-icon) {
    padding: 0.75rem 0.75rem 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) {
  .button,
  .c-button {
    gap: 16px;
    padding: 0.75rem;
  }
}
.button .c-button__icon-wrapper,
.c-button .c-button__icon-wrapper {
  transition: all 0.25s var(--transition-easeInOutQuad);
}
@media (min-width: 768px) {
  .button .c-button__icon-wrapper,
  .c-button .c-button__icon-wrapper {
    align-items: center;
    background-color: var(--crp-color-white);
    block-size: 32px;
    border-radius: 100px;
    display: inline-flex;
    inline-size: 32px;
    justify-content: center;
  }
}
.button .c-icon,
.c-button .c-icon {
  block-size: 20px;
  inline-size: 20px;
  transition: all 0.25s var(--transition-easeInOutQuad);
}
@media (min-width: 768px) {
  .button .c-icon,
  .c-button .c-icon {
    block-size: 24px;
    inline-size: 24px;
  }
}
.button:hover, .button:focus,
.c-button:hover,
.c-button:focus {
  cursor: pointer;
  text-decoration-color: currentColor;
}
@media (min-width: 768px) {
  .button:hover:has(.c-icon), .button:focus:has(.c-icon),
  .c-button:hover:has(.c-icon),
  .c-button:focus:has(.c-icon) {
    padding: 0.75rem 1.25rem 0.75rem 1.75rem;
  }
}
.button:hover .c-button__icon-wrapper, .button:focus .c-button__icon-wrapper,
.c-button:hover .c-button__icon-wrapper,
.c-button:focus .c-button__icon-wrapper {
  transform: translateX(8px);
}
.button:has(.c-button__text),
.c-button:has(.c-button__text) {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.button:hover > .c-button__text, .button:focus > .c-button__text,
.c-button:hover > .c-button__text,
.c-button:focus > .c-button__text {
  background-size: 100%;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c-button__text {
  background-image: linear-gradient(180deg, transparent 0, transparent calc(100% - 1px), currentColor calc(100% - 1px), currentColor 100%);
  background-position: 0;
  background-repeat: no-repeat;
  background-size: 0;
  position: relative;
  -webkit-text-decoration: none;
  text-decoration: none;
  transition: background-size 0.35s var(--transition-easeInOutQuad);
  z-index: var(--crp-zindex-over);
}

.c-button--link {
  background: none;
  border-radius: 0;
  color: var(--crp-color-navy);
  gap: 4px;
  padding: 0;
}
.c-button--link:has(.c-icon) {
  padding: 0;
}
.c-button--link .c-icon {
  background-color: var(--crp-color-navy);
  block-size: 20px;
  inline-size: 20px;
}
@media (min-width: 768px) {
  .c-button--link .c-icon {
    block-size: 26px;
    inline-size: 26px;
  }
}
.c-button--link:hover:has(.c-icon), .c-button--link:focus:has(.c-icon) {
  padding: 0;
}
.c-button--link:hover .c-icon, .c-button--link:focus .c-icon {
  transform: translateX(4px);
}

.c-button--navy {
  background: var(--crp-color-navy);
  color: var(--crp-color-white);
}
.c-button--navy .c-icon {
  background-color: var(--crp-color-white);
}
@media (min-width: 768px) {
  .c-button--navy .c-icon {
    background-color: var(--crp-color-navy);
  }
}

.c-button--green {
  background: var(--crp-color-vibrant-green);
  color: var(--crp-color-black);
}
.c-button--green .c-icon {
  background-color: var(--crp-color-black);
}
@media (min-width: 768px) {
  .c-button--green .c-icon {
    background-color: var(--crp-color-black);
  }
}

.c-button--blue {
  background: var(--crp-color-light-blue);
  color: var(--crp-color-black);
}
.c-button--blue .c-icon {
  background-color: var(--crp-color-black);
}
@media (min-width: 768px) {
  .c-button--blue .c-icon {
    background-color: var(--crp-color-black);
  }
}

.c-button--white-green {
  background: var(--crp-color-white);
  color: var(--crp-color-black);
}
@media (min-width: 768px) {
  .c-button--white-green .c-button__icon-wrapper {
    background-color: var(--crp-color-vibrant-green);
  }
}
.c-button--white-green .c-icon {
  background-color: var(--crp-color-black);
}

.c-button--white-blue {
  background: var(--crp-color-white);
  color: var(--crp-color-black);
}
@media (min-width: 768px) {
  .c-button--white-blue .c-button__icon-wrapper {
    background-color: var(--crp-color-light-blue);
  }
}
.c-button--white-blue .c-icon {
  background-color: var(--crp-color-black);
}

.c-button--white-yellow {
  background: var(--crp-color-white);
  color: var(--crp-color-black);
}
@media (min-width: 768px) {
  .c-button--white-yellow .c-button__icon-wrapper {
    background-color: var(--crp-color-yellow);
  }
}
.c-button--white-yellow .c-icon {
  background-color: var(--crp-color-black);
}

@media (min-width: 768px) {
  .c-button--large {
    gap: 16px;
    padding: 16px 16px 16px 32px;
  }
}

.text-content .c-button--link:hover, .text-content .c-button--link:focus {
  padding: 0 0.5rem 0 0;
}
.text-content .c-button--link::after {
  block-size: 20px;
  inline-size: 20px;
  background-color: var(--crp-color-navy);
  content: "";
  -webkit-mask-image: svg-load("arrow-right.svg");
          mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203.984l8.016%208.016-8.016%208.016-1.406-1.406%205.578-5.625h-12.188v-1.969h12.188l-5.578-5.625z%22%2F%3E%3C%2Fsvg%3E%20");
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: transform 0.25s var(--transition-easeInOutQuad);
}
@media (min-width: 768px) {
  .text-content .c-button--link::after {
    block-size: 26px;
    inline-size: 26px;
  }
}
.text-content .c-button--link:hover::after, .text-content .c-button--link:focus::after {
  transform: translate(8px, 0);
}
@media (min-width: 768px) {
  .text-content .c-button--navy,
  .text-content .c-button--green,
  .text-content .c-button--blue {
    padding: 0.75rem 3.75rem 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) {
  .text-content .c-button--navy:hover, .text-content .c-button--navy:focus,
  .text-content .c-button--green:hover,
  .text-content .c-button--green:focus,
  .text-content .c-button--blue:hover,
  .text-content .c-button--blue:focus {
    padding: 0.75rem 4.25rem 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) {
  .text-content .c-button--navy::before,
  .text-content .c-button--green::before,
  .text-content .c-button--blue::before {
    block-size: 32px;
    inline-size: 32px;
    background: var(--crp-color-white);
    border-radius: 50%;
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.25s var(--transition-easeInOutQuad);
  }
}
@media (min-width: 768px) {
  .text-content .c-button--navy::after,
  .text-content .c-button--green::after,
  .text-content .c-button--blue::after {
    block-size: 24px;
    inline-size: 24px;
    background-color: var(--crp-color-black);
    content: "";
    -webkit-mask-image: svg-load("arrow-right.svg");
            mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203.984l8.016%208.016-8.016%208.016-1.406-1.406%205.578-5.625h-12.188v-1.969h12.188l-5.578-5.625z%22%2F%3E%3C%2Fsvg%3E%20");
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.25s var(--transition-easeInOutQuad);
  }
}
.text-content .c-button--navy:hover::before, .text-content .c-button--navy:hover::after, .text-content .c-button--navy:focus::before, .text-content .c-button--navy:focus::after,
.text-content .c-button--green:hover::before,
.text-content .c-button--green:hover::after,
.text-content .c-button--green:focus::before,
.text-content .c-button--green:focus::after,
.text-content .c-button--blue:hover::before,
.text-content .c-button--blue:hover::after,
.text-content .c-button--blue:focus::before,
.text-content .c-button--blue:focus::after {
  transform: translate(0, -50%);
}
.text-content .c-button--navy::after {
  background-color: var(--crp-color-navy);
}
.text-content .c-button--green::after,
.text-content .c-button--blue::after {
  background-color: var(--crp-color-black);
}