/* New action buttons */

:is(
  .button--primary, 
  .button--secondary, 
  .button--primary--invert, 
  .button--secondary--invert ) {
  font-size: 1.2rem;
  font-weight: bold;
  font-family: var(--brandFont);
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  text-align: center;
  line-height: 1.11;
  transition: .2s all ease-in-out;
  text-decoration: none !important;
  white-space: nowrap;
}

:is(
  .button--primary, 
  .button--secondary, 
  .button--primary--invert, 
  .button--secondary--invert ):visited {
  color: inherit;
}

:is(
  .button--primary, 
  .button--secondary, 
  .button--primary--invert, 
  .button--secondary--invert)::after {
  grid-column: 2;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: .2s all ease-in-out;
  aspect-ratio: 1 / 1;
}

:is(
  .button--primary, 
  .button--secondary, 
  .button--primary--invert, 
  .button--secondary--invert):hover {
  translate: 0 -2px 0;
  box-shadow: 0 1px 4px rgba(0 0 0 / 25%);   
}

/* Primary */

.button--primary, 
.button--primary--invert {
  gap: 2rem;
  padding-left: 2rem;
}

.button--primary {
  background: var(--primary2);
  color: white !important;
}

.button--primary:hover {
  background: var(--primary1);
  color: white;
}

.button--primary::after {
  color: white !important;
  content: url("data:image/svg+xml,%3Csvg width='21' height='17' viewBox='0 0 17 14' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.6993 6.3087L8.16549 1.77493L9.53698 0.403438L16.412 7.27849L9.69172 13.9988L8.32022 12.6273L12.6993 8.24829L0.41127 8.24829L0.41127 6.3087L12.6993 6.3087Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
  background-color: var(--primary1);
}

.button--primary:hover::after {
  background: var(--secondary1);
}

.button--primary--invert {
  border: 3px solid var(--secondary2);
  color: white !important;
  background: transparent;
}

.button--primary--invert:hover {
  border: 3px solid white;
  color: white !important;
  /* background: var(--primary2); */
}

.button--primary--invert::after {
  color: var(--text);
  background-color: var(--secondary2);
  content: url("data:image/svg+xml,%3Csvg width='21' height='17' viewBox='0 0 17 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.6993 6.3087L8.16549 1.77493L9.53698 0.403438L16.412 7.27849L9.69172 13.9988L8.32022 12.6273L12.6993 8.24829L0.41127 8.24829L0.41127 6.3087L12.6993 6.3087Z' fill='%232c353b'/%3E%3C/svg%3E%0A");
}

.button--primary--invert:hover::after {
  background: white;
  content: url("data:image/svg+xml,%3Csvg width='21' height='17' viewBox='0 0 17 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.6993 6.3087L8.16549 1.77493L9.53698 0.403438L16.412 7.27849L9.69172 13.9988L8.32022 12.6273L12.6993 8.24829L0.41127 8.24829L0.41127 6.3087L12.6993 6.3087Z' fill='%2300b388'/%3E%3C/svg%3E%0A");
}

/* Primary invert */
:is(.button--primary, .button--primary--invert)::after {
  min-width: 4rem;
}


/* Secondary */

a.button--secondary {
  color: var(--text) !important;
  background: var(--gray100);
  gap: 1rem;
  padding-left: 1rem; 
}

.button--secondary:hover {
  background: var(--gray200);
  color: var(--text);
}

:is(.collapse-box, [class*="callout"]) a.button--secondary {
  border: 3px solid var(--secondary2);
  /* background-color: white; */
}

.button--secondary::after {
  color: var(--text);
  content: url("data:image/svg+xml,%3Csvg width='21' height='17' viewBox='0 0 17 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.6993 6.3087L8.16549 1.77493L9.53698 0.403438L16.412 7.27849L9.69172 13.9988L8.32022 12.6273L12.6993 8.24829L0.41127 8.24829L0.41127 6.3087L12.6993 6.3087Z' fill='%232c353b'/%3E%3C/svg%3E%0A");
  min-width: 3rem;
  padding-top: 5px;
  background-color: var(--secondary2);
}

.button--secondary:hover::after {
  background: var(--secondary2);
}


/* Text button */
a.button--text,
a.button--text--invert { 
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: .2s all ease-in-out;
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: transparent;
  text-underline-offset: -.1em;
  padding: .25rem 0;
}

.button--text:hover {
  color: var(--primary2) !important;
  text-decoration-color: var(--primary2);
}

.button--text--invert:hover {
  color: white !important;
  text-decoration-color: var(--primary2);
  text-decoration-color: white;
}


:is(.button--text, .button--text--invert):hover {
  font-weight: bold;
  text-underline-offset: 2px;
}

a.button--text {
  color: var(--text) !important;
}

a.button--text--invert {
  color: white;
}


:is(.button--text, .button--text--invert)::after {
  grid-column: 2;
  translate: 0 2px 0;
  transition: .2s all ease-in-out;
}

.button--text::after,
.button--text--invert:hover::after {
  content: url("data:image/svg+xml,%3Csvg width='21' height='17' viewBox='0 0 17 14' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.6993 6.3087L8.16549 1.77493L9.53698 0.403438L16.412 7.27849L9.69172 13.9988L8.32022 12.6273L12.6993 8.24829L0.41127 8.24829L0.41127 6.3087L12.6993 6.3087Z' fill='%2300b388'/%3E%3C/svg%3E%0A");
}

.button--text:hover::after {
  content: url("data:image/svg+xml,%3Csvg width='21' height='17' viewBox='0 0 17 14' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.6993 6.3087L8.16549 1.77493L9.53698 0.403438L16.412 7.27849L9.69172 13.9988L8.32022 12.6273L12.6993 8.24829L0.41127 8.24829L0.41127 6.3087L12.6993 6.3087Z' fill='%230074bf'/%3E%3C/svg%3E%0A");
}


a.button--text--invert::after {
  content: url("data:image/svg+xml,%3Csvg width='21' height='17' viewBox='0 0 17 14' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.6993 6.3087L8.16549 1.77493L9.53698 0.403438L16.412 7.27849L9.69172 13.9988L8.32022 12.6273L12.6993 8.24829L0.41127 8.24829L0.41127 6.3087L12.6993 6.3087Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
}