/**
 * Mixin for fluid type.
 * Example usage: @include fluid-type(font-size, 320px, 1600px, 32px, 80px);
 */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
:host {
  display: block;
}
.hy-cta-button-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.hy-cta-button {
  cursor: pointer;
  font-family: var(--main-font-family);
  font-weight: 700;
  position: relative;
  text-decoration: none;
}
.hy-cta-button.transparent-background, .hy-cta-button.black-background, .hy-cta-button.blue-background, .hy-cta-button.white-background, .hy-cta-button.hero-white, .hy-cta-button.hero-blue, .hy-cta-button.hero-black, .hy-cta-button.dark-blue-background {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  max-width: 328px;
  padding: 13px 16px;
}
.hy-cta-button.transparent-background .text, .hy-cta-button.black-background .text, .hy-cta-button.blue-background .text, .hy-cta-button.white-background .text, .hy-cta-button.hero-white .text, .hy-cta-button.hero-blue .text, .hy-cta-button.hero-black .text, .hy-cta-button.dark-blue-background .text {
  font-size: 1rem;
  line-height: 18px;
  letter-spacing: -0.3px;
}
.hy-cta-button.transparent-background .link-icon, .hy-cta-button.black-background .link-icon, .hy-cta-button.blue-background .link-icon, .hy-cta-button.white-background .link-icon, .hy-cta-button.hero-white .link-icon, .hy-cta-button.hero-blue .link-icon, .hy-cta-button.hero-black .link-icon, .hy-cta-button.dark-blue-background .link-icon {
  margin-left: 8px;
}
.hy-cta-button.transparent-background .link-icon svg, .hy-cta-button.black-background .link-icon svg, .hy-cta-button.blue-background .link-icon svg, .hy-cta-button.white-background .link-icon svg, .hy-cta-button.hero-white .link-icon svg, .hy-cta-button.hero-blue .link-icon svg, .hy-cta-button.hero-black .link-icon svg, .hy-cta-button.dark-blue-background .link-icon svg {
  height: 16px;
  width: 16px;
}
.hy-cta-button.dark-blue-background {
  background-color: var(--brand-main-dark);
  border: 4px solid var(--grayscale-white);
  color: var(--grayscale-white);
}
.hy-cta-button.dark-blue-background:focus-visible {
  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
}
.hy-cta-button.dark-blue-background .link-icon svg {
  background-color: var(--brand-main-dark);
  fill: var(--grayscale-white);
}
.hy-cta-button.dark-blue-background .text {
  color: var(--grayscale-white);
}
.hy-cta-button.transparent-background {
  background-color: var(--grayscale-white);
  border: 4px solid var(--grayscale-black);
  color: var(--grayscale-black);
}
.hy-cta-button.transparent-background:focus-visible {
  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
}
.hy-cta-button.transparent-background .link-icon svg {
  background-color: var(--grayscale-white);
  fill: var(--grayscale-black);
}
.hy-cta-button.transparent-background .text {
  color: var(--grayscale-black);
}
.hy-cta-button.black-background {
  background-color: var(--grayscale-black);
  border: 4px solid var(--grayscale-white);
  color: var(--grayscale-white);
}
.hy-cta-button.black-background .link-icon svg {
  background-color: var(--grayscale-black);
  fill: var(--grayscale-white);
}
.hy-cta-button.black-background .text {
  color: var(--grayscale-white);
}
.hy-cta-button.black-background:focus-visible {
  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
}
.hy-cta-button.black-background:hover {
  background-color: var(--brand-main-active);
}
.hy-cta-button.black-background:hover .link-icon svg {
  background-color: var(--brand-main-active);
}
.hy-cta-button.black-background:focus-visible {
  background-color: var(--brand-main);
}
.hy-cta-button.black-background:focus-visible .link-icon svg {
  background-color: var(--brand-main);
}
.hy-cta-button.blue-background {
  background-color: var(--brand-main-light);
  border: 4px solid var(--grayscale-white);
  color: var(--grayscale-white);
}
.hy-cta-button.blue-background .link-icon svg {
  background-color: var(--brand-main-light);
  fill: var(--grayscale-white);
}
.hy-cta-button.blue-background .text {
  color: var(--grayscale-white);
}
.hy-cta-button.blue-background:focus-visible {
  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
}
.hy-cta-button.blue-background:hover {
  background-color: var(--brand-main);
}
.hy-cta-button.blue-background:hover .link-icon svg {
  background-color: var(--brand-main);
}
.hy-cta-button.blue-background:focus-visible {
  background-color: var(--brand-main-active);
}
.hy-cta-button.blue-background:focus-visible .link-icon svg {
  background-color: var(--brand-main-active);
}
.hy-cta-button.white-background {
  background-color: var(--grayscale-white);
  border: 4px solid var(--brand-main-light);
  color: var(--brand-main-light);
}
.hy-cta-button.white-background .link-icon svg {
  background-color: var(--grayscale-white);
  fill: var(--brand-main-light);
}
.hy-cta-button.white-background .text {
  color: var(--brand-main-light);
}
.hy-cta-button.white-background:focus-visible {
  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
}
.hy-cta-button.white-background:hover {
  border-color: var(--brand-main-active);
}
.hy-cta-button.white-background:hover .text {
  color: var(--brand-main-active);
}
.hy-cta-button.white-background:hover .link-icon svg {
  fill: var(--brand-main-active);
}
.hy-cta-button.white-background:focus-visible {
  border-color: var(--brand-main-active);
}
.hy-cta-button.white-background:focus-visible .text {
  color: var(--brand-main-active);
}
.hy-cta-button.white-background:focus-visible .link-icon svg {
  fill: var(--brand-main-active);
}
.hy-cta-button.hero-white {
  background-color: var(--brand-main-light);
  color: var(--grayscale-white);
}
.hy-cta-button.hero-white .link-icon svg {
  background-color: var(--brand-main-light);
  fill: var(--grayscale-white);
}
.hy-cta-button.hero-white .text {
  color: var(--grayscale-white);
}
.hy-cta-button.hero-white:focus-visible {
  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
}
.hy-cta-button.hero-white:hover {
  background-color: var(--brand-main-active);
}
.hy-cta-button.hero-white:hover .link-icon svg {
  background-color: var(--brand-main-active);
}
.hy-cta-button.hero-white:focus-visible {
  background-color: var(--brand-main-active);
}
.hy-cta-button.hero-white:focus-visible .link-icon svg {
  background-color: var(--brand-main-active);
}
.hy-cta-button.hero-black {
  background-color: var(--grayscale-black);
  border: 4px solid var(--grayscale-white);
  color: var(--grayscale-white);
}
.hy-cta-button.hero-black .link-icon svg {
  background-color: var(--grayscale-black);
  fill: var(--grayscale-white);
}
.hy-cta-button.hero-black .text {
  color: var(--grayscale-white);
}
.hy-cta-button.hero-black:focus-visible {
  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
}
.hy-cta-button.hero-black:hover {
  border-color: var(--brand-main-soft);
}
.hy-cta-button.hero-black:hover .text {
  color: var(--brand-main-soft);
}
.hy-cta-button.hero-black:hover .link-icon svg {
  fill: var(--brand-main-soft);
}
.hy-cta-button.hero-black:focus-visible {
  border-color: var(--brand-main-soft);
}
.hy-cta-button.hero-black:focus-visible .text {
  color: var(--brand-main-soft);
}
.hy-cta-button.hero-black:focus-visible .link-icon svg {
  fill: var(--brand-main-soft);
}
.hy-cta-button.hero-blue {
  background-color: var(--brand-main);
  border: 4px solid var(--grayscale-white);
  color: var(--grayscale-white);
}
.hy-cta-button.hero-blue .link-icon svg {
  background-color: var(--brand-main);
  fill: var(--grayscale-white);
}
.hy-cta-button.hero-blue .text {
  color: var(--grayscale-white);
}
.hy-cta-button.hero-blue:focus-visible {
  -webkit-box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
}
.hy-cta-button.hero-blue:hover {
  border-color: var(--brand-main-soft);
}
.hy-cta-button.hero-blue:hover .text {
  color: var(--brand-main-soft);
}
.hy-cta-button.hero-blue:hover .link-icon svg {
  fill: var(--brand-main-soft);
}
.hy-cta-button.hero-blue:focus-visible {
  border-color: var(--brand-main-soft);
}
.hy-cta-button.hero-blue:focus-visible .text {
  color: var(--brand-main-soft);
}
.hy-cta-button.hero-blue:focus-visible .link-icon svg {
  fill: var(--brand-main-soft);
}