/* stylelint-disable no-descending-specificity */

/********************************************
  BASE BUTTON (ALL VARIANTS)
*********************************************/
body :where(main, footer .content-block-container) a.button:any-link,
body :where(main, footer .content-block-container) .button,
button.dropin-button.dropin-button--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap, 8px);
  padding: var(--spacing-xs, 12px) var(--btn-padding-x, 48px);
  border-radius: var(--btn-border-radius, 0);
  border: 1px solid transparent;
  cursor: pointer;
  min-height: var(--btn-height, 44px);
  box-sizing: border-box;

  /* default to primary theme */
  background-color: var(--btn-bg, var(--btn-primary-bg));
  color: var(--btn-txt, var(--btn-primary-txt));
  border-color: var(--btn-border, var(--btn-primary-border));
  font-size: var(--btn-font-size, 16px);
  font-weight: var(--btn-font-weight, 700);
  line-height: var(--btn-line-height, 16px);
  letter-spacing: normal;
  text-transform: capitalize;

  &:empty {
    display: none;
  }
}

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

/* ===============================
   DISABLED (global)
================================ */
body :where(main, footer .content-block-container) a.button:any-link:disabled,
body :where(main, footer .content-block-container) .button:disabled,
body :where(main, footer .content-block-container) a.button:any-link[disabled],
body :where(main, footer .content-block-container) .button[disabled],
body :where(main, footer .content-block-container) a.button:any-link[aria-disabled="true"],
body :where(main, footer .content-block-container) .button[aria-disabled="true"] {
  opacity: var(--btn-disabled-opacity, 0.6);
  cursor: var(--btn-disabled-cursor, not-allowed);

  &:hover{
    text-decoration: none;
  }
}

/* ===============================
   FOCUS (global)
================================ */
body :where(main, footer .content-block-container) a.button:any-link:focus-within,
body :where(main, footer .content-block-container) .button:focus-within {
  outline: 1px solid var(--btn-focus, var(--btn-primary-focus-outline));
  outline-offset: 4px;
}

/* ===============================
   HOVER (global)
================================ */
body :where(main, footer .content-block-container)
a.button:any-link:not(:disabled, [disabled], [aria-disabled="true"]):hover,
body :where(main, footer .content-block-container)
.button:not(:disabled, [disabled], [aria-disabled="true"]):hover {
  background-color: var(--btn-bg-hover, var(--btn-primary-bg-hover));
  color: var(--btn-txt-hover, var(--btn-primary-txt-hover));
  border-color: var(--btn-border-hover, var(--btn-primary-border-hover));
  text-decoration: none;

  .icon {
    color: var(--btn-icon-hover);
  }
}

/********************************************
  VARIANT: PRIMARY (DEFAULT)
*********************************************/
body :where(main, footer .content-block-container) .btn-primary,
body :where(main, footer .content-block-container) a.button:any-link.btn-primary,
button.dropin-button.dropin-button--primary {
  --btn-bg: var(--btn-primary-bg);
  --btn-bg-hover: var(--btn-primary-bg-hover);
  --btn-txt: var(--btn-primary-txt);
  --btn-txt-hover: var(--btn-primary-txt-hover);
  --btn-border: var(--btn-primary-border);
  --btn-border-hover: var(--btn-primary-border-hover);
  --btn-focus: var(--btn-primary-focus-outline);
}

/********************************************
  VARIANT: SECONDARY
*********************************************/
body :where(main, footer .content-block-container) .btn-secondary,
body :where(main, footer .content-block-container) a.button:any-link.btn-secondary {
  --btn-bg: var(--btn-secondary-bg);
  --btn-bg-hover: var(--btn-secondary-bg-hover);
  --btn-txt: var(--btn-secondary-txt);
  --btn-txt-hover: var(--btn-secondary-txt-hover);
  --btn-border: var(--btn-secondary-border);
  --btn-border-hover: var(--btn-secondary-border-hover);
  --btn-focus: var(--btn-primary-focus-outline);
}

p.button-container,
.button-container p {
  display: block;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 0;
}

/********************************************
  VARIANT: TERTIARY
*********************************************/
body :where(main, footer .content-block-container) .btn-tertiary,
body :where(main, footer .content-block-container) a.button:any-link.btn-tertiary {
  --btn-bg-hover: var(--btn-tertiary-bg-hover);
  --btn-txt: var(--btn-tertiary-txt);
  --btn-txt-hover: var(--btn-tertiary-txt-hover);
  --btn-border: var(--btn-tertiary-border);
  --btn-border-hover: var(--btn-tertiary-border-hover);
  --btn-focus: var(--btn-primary-focus-outline);

  /* gradient text */
  background-image: var(--btn-tertiary-bg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  .icon {
    color: var(--btn-tertiary-icon-color);
  }
}


body :where(main, footer .content-block-container) .btn-tertiary:hover,
body :where(main, footer .content-block-container) a.button:any-link.btn-tertiary:hover {
  background-image: var(--btn-tertiary-bg-hover);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  .icon {
    color: var(--btn-tertiary-icon-color);
  }
}

body :where(main, footer .content-block-container) .btn-tertiary u,
body :where(main, footer .content-block-container) a.button:any-link.btn-tertiary u {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  gap: var(--btn-gap, 12px);
}

body :where(main, footer .content-block-container) .btn-tertiary:focus,
body :where(main, footer .content-block-container) a.button:any-link.btn-tertiary:focus {
  border-color: var(--color-blue-dark);
}

/********************************************
  VARIANT: WITH ICON
*********************************************/
body :where(main, footer .content-block-container) .btn-with-icon,
body :where(main, footer .content-block-container) a.button:any-link.btn-with-icon {
  --btn-bg: var(--btn-with-icon-bg);
  --btn-bg-hover: var(--btn-with-icon-bg-hover);
  --btn-txt: var(--btn-with-icon-txt);
  --btn-txt-hover: var(--btn-with-icon-txt-hover);
  --btn-border: var(--btn-with-icon-border);
  --btn-border-hover: var(--btn-with-icon-border-hover);
  --btn-focus: var(--btn-primary-focus-outline);

  border-width: 1.5px;

  .icon {
    color: var(--btn-icon-color);
  }
}

/********************************************
  SIZE: SMALL
*********************************************/
body :where(main, footer .content-block-container) a.button:any-link.btn-sm,
body :where(main, footer .content-block-container) .button.btn-sm {
  padding: var(--btn-padding-y-sm, 6px) var(--spacing-sm, 24px);
  gap: var(--btn-gap-sm, 8px);
  min-height: var(--btn-height-sm, 32px);
}


.default-content-wrapper p.button-container {
  margin: 16px 0;
}

 .cta-wrapper {
  display: flex;
  justify-content: flex-start;
  gap: var(--spacing-md);
  margin-top: 0;
  white-space: nowrap;
  flex-direction: column;

  @media (min-width: 992px) {
    flex-direction: row;
  }

  .button-container {
    &, .button {
      @media (max-width: 991px) {
        width: 100%;
      }
    }
  }
}