@import url('./styles.css');

/* all buttons */
.button-container button.disabled,
.button-container a.button.disabled {
  pointer-events: none;
}

.button-container a.button,
.button-container button {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 16px 32px;
  font-family: var(--body-font-family);
  font-style: normal;
  font-weight: 700;
  font-size: var(--body-font-size-xs);
  line-height: 20px;
  letter-spacing: 0.32px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  border-radius: var(--border-radius-xl);
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.2s ease;
  outline-offset: 4px;
  outline: 2px solid transparent;
  border: 2px solid transparent;
}

/* Input Button */
.button-container a.button.primary-variant,
.button-container button.primary-variant,
.button-container a.button.secondary-variant,
.button-container button.secondary-variant {
  border-radius: var(--border-radius-m);
  font-size: var(--body-font-size-xs);
  line-height: 20px;
  letter-spacing: 0.32px;
  font-weight: 700;
  font-style: normal;
  font-family: var(--body-font-family);
  display: inline-flex;
  padding: 16px 32px;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 100%;
  outline-offset: 4px;
  outline: 2px solid transparent;
  border: 2px solid transparent;
  text-decoration: none;
}

.button-container a.button.disabled,
.button-container button:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.3;
  text-decoration: none;
}

.button-container a.button svg,
.button-container button svg {
  height: var(--icon-size-sm);
  width: var(--icon-size-sm);
}

.button-container a.button.primary svg path,
.button-container button.primary svg path,
.button-container a.button.primary-variant svg path,
.button-container button.primary-variant svg path,
.button-container a.button.secondary.iblack svg path,
.button-container button.secondary.iblack svg path,
.button-container a.button.secondary-variant.iblack svg path,
.button-container button.secondary-variant.iblack svg path,
.button-container a.button.text-btn.iblack svg path,
.button-container button.text-btn.iblack svg path {
  fill: var(--color-white);
}

.button-container a.button.primary.iblack svg path,
.button-container button.primary.iblack svg path,
.button-container a.button.primary-variant.iblack svg path,
.button-container button.primary-variant.iblack svg path {
  fill: var(--primary-cta);
}

.button-container a.button.secondary svg path,
.button-container button.secondary svg path,
.button-container a.button.secondary-variant svg path,
.button-container button.secondary-variant svg path {
  fill: var(--secondary-cta);
}

.button-container a.button.text-btn svg path,
.button-container button.text-btn svg path {
  fill: var(--link-color);
}

.button-container a.button.secondary-variant:hover svg path,
.button-container button.secondary-variant:hover svg path,
.button-container a.button.primary.iblack:hover svg path,
.button-container button.primary.iblack:hover svg path,
.button-container a.button.primary-variant.iblack:hover svg path,
.button-container button.primary-variant.iblack:hover svg path {
  fill: var(--primary-cta-hover);
}

.button-container a.button.secondary:hover svg path,
.button-container button.secondary:hover svg path {
  fill: var(--secondary-cta-hover);
}

.button-container a.button.secondary.iblack:hover svg path,
.button-container button.secondary.iblack:hover svg path,
.button-container a.button.secondary-variant.iblack:hover svg path,
.button-container button.secondary-variant.iblack:hover svg path {
  fill: var(--color-white);
}

/* Primary Button Styles */

.button-container a.button.primary,
.button-container button.primary,
.button-container a.button.primary-variant,
.button-container button.primary-variant {
  background-color: var(--primary-cta);
  color: var(--color-white);
  text-decoration: none;
}

.button-container a.button.primary:hover,
.button-container button.primary:hover,
.button-container a.button.primary-variant:hover,
.button-container button.primary-variant:hover {
  background-color: var(--primary-cta-hover);
  text-decoration: none;
}

.button-container a.button.primary.disabled,
.button-container button.primary:disabled,
.button-container a.button.primary-variant.disabled,
.button-container button.primary-variant:disabled {
  background-color: var(--deativated);
  text-decoration: none;
}

.button-container a.button.primary:focus,
.button-container button.primary:focus,
.button-container a.button.primary-variant:focus,
.button-container button.primary-variant:focus {
  background-color: var(--primary-cta);
  outline: 2px solid var(--primary-cta);
  border: 2px solid var(--primary-cta);
}

.button-container a.button:focus {
  outline: 2px solid var(--primary-border);
  border: 2px solid var(--text-white);
}

.button-container a.button.primary.iblack,
.button-container button.primary.iblack,
.button-container a.button.primary-variant.iblack,
.button-container button.primary-variant.iblack {
  background-color: var(--color-white);
  color: var(--primary-cta);
  text-decoration: none;
}

.button-container a.button.primary.iblack:hover,
.button-container button.primary.iblack:hover,
.button-container a.button.primary-variant.iblack:hover,
.button-container button.primary-variant.iblack:hover {
  background-color: var(--gray-bg);
}

.button-container a.button.primary.iblack.disabled,
.button-container button.primary.iblack:disabled,
.button-container a.button.primary-variant.iblack.disabled,
.button-container button.primary-variant.iblack:disabled {
  background-color: var(--gray-bg);
  text-decoration: none;
}

.button-container a.button.primary.iblack:focus,
.button-container button.primary.iblack:focus,
.button-container a.button.primary-variant.iblack:focus,
.button-container button.primary-variant.iblack:focus {
  background-color: var(--color-white);
  outline: 2px solid var(--color-white);
  border: 2px solid var(--color-white);
}

/* Secondary Button Styles */
.button-container a.button.secondary,
.button-container button.secondary,
.button-container a.button.secondary-variant,
.button-container button.secondary-variant {
  background-color: var(--color-white);
  border: 2px solid var(--secondary-cta);
  color: var(--secondary-cta);
  text-decoration: none;
}

.button-container a.button.secondary:hover,
.button-container button.secondary:hover,
.button-container a.button.secondary-variant:hover,
.button-container button.secondary-variant:hover {
  background-color: color-mix(in srgb, white 95%, var(--secondary-cta) 5%);
  border: 2px solid var(--secondary-cta-hover);
  text-decoration: none;
}

.button-container a.button.secondary.disabled,
.button-container button.secondary:disabled,
.button-container a.button.secondary-variant.disabled,
.button-container button.secondary-variant:disabled {
  border: 2px solid var(--deactivated-secondary);
}

.button-container a.button.secondary:focus,
.button-container button.secondary:focus,
.button-container a.button.secondary-variant:focus,
.button-container button.secondary-variant:focus {
  background-color: var(--color-white);
  outline: 2px solid var(--secondary-cta);
  border: 2px solid var(--secondary-cta);
}

.button-container a.button.secondary.iblack,
.button-container button.secondary.iblack,
.button-container a.button.secondary-variant.iblack,
.button-container button.secondary-variant.iblack {
  border: 2px solid var(--color-white);
  color: var(--color-white);
  background: none;
}

.button-container a.button.secondary.iblack:hover,
.button-container button.secondary.iblack:hover,
.button-container a.button.secondary-variant.iblack:hover,
.button-container button.secondary-variant.iblack:hover {
  border: 2px solid var(--gray-bg);
}

.button-container a.button.secondary.iblack.disabled,
.button-container button.secondary.iblack:disabled,
.button-container a.button.secondary-variant.iblack.disabled,
.button-container button.secondary-variant.iblack:disabled {
  border: 2px solid var(--gray-bg);
}

.button-container a.button.secondary.iblack:focus,
.button-container button.secondary.iblack:focus,
.button-container a.button.secondary-variant.iblack:focus,
.button-container button.secondary-variant.iblack:focus {
  outline: 2px solid var(--color-white);
  border: 2px solid var(--color-white);
}

/* Text Button */
.button-container a.button.text-btn,
.button-container button.text-btn {
  background-color: unset;
  color: var(--link-color);
  -webkit-text-fill-color: var(--link-color);
  font-weight: var(--font-weight-regular);
  text-decoration: underline;
  padding: 0;
  border-radius: unset;
  border: 0;
}

.button-container a.button.text-btn:hover,
.button-container button.text-btn:hover {
  color: var(--link-hover-color);
}

.button-container a.button.text-btn:hover svg path,
.button-container button.text-btn:hover svg path {
  fill: var(--link-color-hover);
}

.button-container a.button.text-btn.disabled,
.button-container button.text-btn:disabled {
  color: var(--link-hover-color);
}

.button-container a.button.text-btn:focus,
.button-container button.text-btn:focus {
  outline: 2px solid var(--primary-border);
  border-radius: var(--border-radius-xs);
}

.button-container a.button.text-btn.iblack,
.button-container button.text-btn.iblack {
  background-color: unset;
  color: var(--color-white);
}

.button-container a.button.text-btn.iblack:hover,
.button-container button.text-btn.iblack:hover {
  color: var(--color-white);
}

.button-container a.button.text-btn.iblack.disabled,
.button-container button.text-btn.iblack:disabled {
  color: var(--link-hover-color);
}

.button-container a.button.text-btn.iblack:focus,
.button-container button.text-btn.iblack:focus {
  outline: 2px solid var(--color-white);
}

.button.block.small .button-container a.button,
.button.block.small .button-container button,
.button.block.small .button-container a.button.primary-variant,
.button.block.small .button-container button.primary-variant,
.button.block.small .button-container a.button.secondary-variant,
.button.block.small .button-container button.secondary-variant {
  padding: 12px 24px;
  font-size: var(--body-font-size-xxs);
  line-height: 18px;
  letter-spacing: 0.28px;
}

.button.block.small .button-container a.button svg,
.button.block.small .button-container button svg {
  height: var(--icon-size-xs);
  width: var(--icon-size-xs);
}

@media (max-width: 992px) {
  .button-container a.button:any-link,
  .button-container button {
    padding: 1rem 2rem;
    line-height: normal;
    letter-spacing: 0.28px;
    font-weight: 700;
    text-decoration: none;
    width: 100%;
  }

  .button-container a.button.secondary {
    width: 100%;
  }

  .button-container a.button.primary-variant,
  .button-container button.primary-variant,
  .button-container a.button.secondary-variant,
  .button-container button.secondary-variant {
 font-size: var(--body-font-size-xs);
    line-height: 1rem;
    letter-spacing: 0.28px;
    padding: 1rem 2rem;
  }

  .button-container a.button svg,
  .button-container button svg {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
  }

  .button-container a.button.text-btn,
  .button-container button.text-btn {
    padding: 0;
  }

  .button-container .button.hero-btn-1,
  .button-container .button.hero-btn-2,
  .button-container .button.hero-btn-3 {
   font-size: var(--body-font-size-xxs);
  }
}

.button-container a.button.secondary-variant:hover svg path {
  fill: var(--secondary-cta-hover);
}

.title-container .text-wrapper a.text-btn,
.title-container .button-container a.button.text-btn:any-link {
  padding-left: 0;
}

/* ----------------------------------------------------
   SUPER HERO & TEASER CTA BUTTONS (1, 2, 3)
---------------------------------------------------- */

.button-container .button.hero-btn-1,
.button-container .button.hero-btn-2,
.button-container .button.hero-btn-3 {
  border-radius: 3rem;
  text-align: center;
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-xl);
  font-style: normal;
  font-weight: 700;
  display: inline-block;
  text-decoration: none;
  border: 0;
  line-height: normal;
}

/* -------------------------
   BUTTON TYPE 1 (RED)
------------------------- */
.button-container .button.hero-btn-1 {
  background: var(--secondary-color3);
  color: var(--text-white);
}

.button-container .button.hero-btn-1:hover {
  background: var(--primary-color2);
}

.button-container .button.hero-btn-1:focus {
  background: var(--secondary-color3);
  outline: 2px solid var(--secondary-color3);
  border: 2px solid var(--secondary-color3);
}

/* -------------------------
   BUTTON TYPE 2 (BLUE)
------------------------- */
.button-container .button.hero-btn-2 {
  background: var(--link-color);
  color: var(--text-white);
}

.button-container .button.hero-btn-2:hover {
  background: var(--primary-color3);
}

.button-container .button.hero-btn-2:focus {
  background: var(--link-color);
  outline: 2px solid var(--link-color);
  border: 2px solid var(--link-color);
}

/* -------------------------
   BUTTON TYPE 3 (WHITE)
------------------------- */
.button-container .button.hero-btn-3 {
  background: var(--background-color);
  color: var(--primary-color3);
}

.button-container .button.hero-btn-3:hover {
  background: var(--neutral-grey);
}

.button-container .button.hero-btn-3:focus {
  background: var(--background-color);
  outline: 2px solid var(--background-color);
  border: 2px solid var(--background-color);
}