/*** CTA Definitions ***/
.pwr-cta_button.pwr-cta_button.pwr-cta_button.pwr-cta_button:where(.pwr-cta_button--primary,
.pwr-cta_button--secondary,
.pwr-cta_button--tertiary,
.pwr-cta_button--link)  {
  border-radius: unset;
  background-color: unset;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items:end;
  gap: var(--jade-spacing-0);
  transition: 
    border-color ease-in 300ms;
  background ease-in 300ms;
  &::before, &::after {
    all:unset;
  }
  
  /* this section sets up the symbol */
  &.pwr-cta_button:where(:not(.pwr-cta_button--link)) {
    &::after {.pwr--dark:not(:has(.pwr--light))
      visibility: visible;
      content: "";
      mask: var(--jade-symbols-arrow-45);
      mask-size: cover;
      height: 20px;
      width: 20px;
      display: block;
      transition: 300ms ease-in transform;
    }
    &:hover::after,
    &:active::after {
      transform: rotate(45deg);
    }
  }
  &.pwr-cta_button--primary {
    background: var(--jade-colors-ultra-jade-100);
    border-color: var(--jade-colors-harakeke-100);
    color: var(--jade-colors-neutrals-900);
    border: 1px solid;
    padding-block: var(--jade-spacing-2);
    padding-inline: var(--jade-spacing-4);
    
    /* background controls symbol color */
    &::after {
      background: var(--jade-colors-neutrals-900);
    }
    &:hover {
      background: var(--jade-colors-ultra-kowhai-75);
      border-color: var(--jade-colors-harakeke-75);
      color: var(--jade-colors-neutrals-900);
      &:after {
        background: var(--jade-colors-neutrals-900);
      }
    }
    &:active {
      color: var(--jade-colors-neutrals-900);
      background: var(--jade-colors-ultra-jade-100);
      border-color: var(--jade-colors-harakeke-125);
      &:after {
        background: var(--jade-colors-neutrals-900);
      }
    }
    &:disabled {
      color: var(--jade-colors-neutrals-300);
      background: var(--jade-colors-neutrals-100);
      border-color: var(--jade-colors-neutrals-50);
      &:after {
        background: var(--jade-colors-neutrals-300);
      }
    }
  }
  &.pwr-cta_button--secondary {
    border-color: var(--jade-colors-harakeke-100);
    color: var(--jade-colors-neutrals-900);
    border: 1px solid;
    padding-block: var(--jade-spacing-2);
    padding-inline: var(--jade-spacing-4);
    
    /* background controls symbol color */
    &::after {
      background:var(--jade-colors-neutrals-900);
    }
    &:hover {
      border-color: var(--jade-colors-harakeke-75);
      color: var(--jade-colors-neutrals-900);
      &:after {
        background: var(--jade-colors-neutrals-900);
      }
    }
    &:active {
      color: var(--jade-colors-neutrals-900);
      border-color: var(--jade-colors-harakeke-125);
      &:after {
        background: var(--jade-colors-neutrals-900);
      }
    }
    &:disabled {
      color: var(--jade-colors-neutrals-300);
      border-color: var(--jade-colors-neutrals-50);
      &:after {
        background: var(--jade-colors-neutrals-300);
      }
    }
  }
  &.pwr-cta_button--tertiary {
    border-color: var(--jade-colors-harakeke-100);
    color: var(--jade-colors-neutrals-700);
    border-bottom: 1px solid;
    padding-inline: unset;
    padding-bottom: unset;
    padding: unset;
    padding-top: unset;
    padding-left: unset;
    padding-right: unset;
    padding-inline: var(--jade-spacing-0);
    
    /* background controls symbol color */
    &::after {
      background:var(--jade-colors-neutrals-700);
    }
    &:hover {
      border-color: var(--jade-colors-harakeke-75);
      color: var(--jade-colors-neutrals-700);
      &:after {
        background: var(--jade-colors-neutrals-700);
      }
    }
    &:active {
      color: var(--jade-colors-neutrals-700);
      border-color: var(--jade-colors-harakeke-125);
      &:after {
        background: var(--jade-colors-neutrals-700);
      }
    }
    &:disabled {
      color: var(--jade-colors-neutrals-300);
      border: none;
      &:after {
        background: var(--jade-colors-neutrals-300);
      }
    }
  }
  &.pwr-cta_button--link {
    text-decoration: none;
    padding: unset;
    color: var(--jade-colors-harakeke-100);
    &:hover {
      color: var(--jade-colors-harakeke-75);
    }
    &:active {
      color: var(--jade-colors-harakeke-125);
    }
    &:disabled {
      color: var(--jade-colors-neutrals-300);
    }
  }
}

/*** CTA Dark Theme ***/
.pwr--dark:not(:has(.pwr--light)) .pwr-cta_button.pwr-cta_button.pwr-cta_button.pwr-cta_button:where(.pwr-cta_button--primary,
.pwr-cta_button--secondary,
.pwr-cta_button--tertiary,
.pwr-cta_button--link) {
  &.pwr-cta_button--primary {
    background: var(--jade-colors-ultra-jade-100);
    border-color: var(--jade-colors-neutrals-900);
    color: var(--jade-colors-neutrals-900);

    /* background controls symbol color */
    &::after {
      background: var(--jade-colors-neutrals-900);
    }
    &:hover {
      background: var(--jade-colors-ultra-jade-75);
      border-color: var(--jade-colors-neutrals-900);
      color: var(--jade-colors-neutrals-900);
      &:after {
        background: var(--jade-colors-neutrals-900);
      }
    }
    &:active {
      color: var(--jade-colors-neutrals-900);
      background: var(--jade-colors-ultra-jade-125);
      border-color: var(--jade-colors-neutrals-900);
      &:after {
        background: var(--jade-colors-neutrals-900);
      }
    }
    &:disabled {
      color: var(--jade-colors-neutrals-600);
      background: var(--jade-colors-neutrals-700);
      border-color: var(--jade-colors-neutrals-700);
      &:after {
        background: var(--jade-colors-neutrals-600);
      }
    }
  }
  &.pwr-cta_button--secondary {
    border-color: var(--jade-colors-harakeke-50);
    color: var(--jade-colors-neutrals-50);

    /* background controls symbol color */
    &::after {
      background:var(--jade-colors-neutrals-50);
    }
    &:hover {
      border-color: var(--jade-colors-harakeke-25);
      color: var(--jade-colors-neutrals-white);
      &:after {
        background: var(--jade-colors-neutrals-white);
      }
    }
    &:active {
      color: var(--jade-colors-neutrals-50);
      border-color: var(--jade-colors-harakeke-75);
      &:after {
        background: var(--jade-colors-neutrals-50);
      }
    }
    &:disabled {
      color: var(--jade-colors-neutrals-600);
      border-color: var(--jade-colors-neutrals-700);
      &:after {
        background: var(--jade-colors-neutrals-600);
      }
    }
  }
  &.pwr-cta_button--tertiary {
    border-color: var(--jade-colors-harakeke-50);
    color: var(--jade-colors-neutrals-100);

    /* background controls symbol color */
    &::after {
      background:var(--jade-colors-neutrals-100);
    }
    &:hover {
      border-color: var(--jade-colors-harakeke-25);
      color: var(--jade-colors-neutrals-100);
      &:after {
        background: var(--jade-colors-neutrals-100);
      }
    }
    &:active {
      color: var(--jade-colors-neutrals-100);
      border-color: var(--jade-colors-harakeke-75);
      &:after {
        background: var(--jade-colors-neutrals-100);
      }
    }
    &:disabled {
      color: var(--jade-colors-neutrals-600);
      border: none;
      &:after {
        background: var(--jade-colors-neutrals-600);
      }
    }
  }
  &.pwr-cta_button--link {
    text-decoration: none;
    color: var(--jade-colors-harakeke-50);
    &:hover {
      color: var(--jade-colors-harakeke-25);
    }
    &:active {
      color: var(--jade-colors-harakeke-75);
    }
    &:disabled {
      color: var(--jade-colors-neutrals-600);
    }
  }
}


/*** PWR Theme Overrides Built in Theme ***/
div.pwr-cta:not(:has(.pwr-cta_button--primary,
.pwr-cta_button--secondary,
.pwr-cta_button--tertiary,
.pwr-cta_button--link))  {
  a.pwr-cta_button {
    /* resets */
    border-radius: unset;
    background-color: unset;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items:end;
    gap: var(--jade-spacing-0);
    transition: 
    border-color ease-in 300ms;
    background ease-in 300ms;
    &::after, &::before {
      all:unset
    
    
    
    
    }
    
      /* this section sets up the symbol */
    &.pwr-cta_button:where(:not(.pwr-cta_button--link)) {
      &::after {
        visibility: visible;
        content: "";
        mask: var(--jade-symbols-arrow-45);
        height: 20px;
        width: 20px;
        display: block;
        transition: 300ms ease-in transform;
      }
      &:hover::after,
      &:active::after {
        transform: rotate(45deg);
      }
    }
  }
  &.pwr-cta--primary-solid,
  &.pwr-cta--regular-solid-primary-background.pwr-cta--regular-solid-primary-background,
  &.pwr-cta--regular-solid  {
  /* overrides */
    a.pwr-cta_button {
      background: var(--jade-colors-ultra-jade-100);
      border-color: var(--jade-colors-harakeke-100);
      color: var(--jade-colors-neutrals-900);
      border: 1px solid;
      padding-block: var(--jade-spacing-2);
      padding-inline: var(--jade-spacing-4);

    /* background controls symbol color */
      &::after {
        background: var(--jade-colors-neutrals-900);
      }
      &:hover {
        background: var(--jade-colors-ultra-kowhai-75);
        border-color: var(--jade-colors-harakeke-75);
        color: var(--jade-colors-neutrals-900);
        &:after {
          background: var(--jade-colors-neutrals-900);
        }
      }
      &:active {
        color: var(--jade-colors-neutrals-900);
        background: var(--jade-colors-ultra-jade-100);
        border-color: var(--jade-colors-harakeke-125);
        &:after {
          background: var(--jade-colors-neutrals-900);
        }
      }
      &:disabled {
        color: var(--jade-colors-neutrals-300);
        background: var(--jade-colors-neutrals-100);
        border-color: var(--jade-colors-neutrals-50);
        &:after {
          background: var(--jade-colors-neutrals-300);
        }
      }
    }
  }
  &.pwr-cta--primary-border.pwr-cta--primary-border,
  &.pwr-cta--regular-border.pwr-cta--regular-border {
  /* overrides */
    a.pwr-cta_button {
      border-color: var(--jade-colors-harakeke-100);
      color: var(--jade-colors-neutrals-900);
      border: 1px solid;
      padding-block: var(--jade-spacing-2);
      padding-inline: var(--jade-spacing-4);
    
    /* background controls symbol color */
      &::after {
        background:var(--jade-colors-neutrals-900);
      }
      &:hover {
        border-color: var(--jade-colors-harakeke-75);
        color: var(--jade-colors-neutrals-900);
        &:after {
          background: var(--jade-colors-neutrals-900);
        }
      }
      &:active {
        color: var(--jade-colors-neutrals-900);
        border-color: var(--jade-colors-harakeke-125);
        &:after {
          background: var(--jade-colors-neutrals-900);
        }
      }
      &:disabled {
        color: var(--jade-colors-neutrals-300);
        border-color: var(--jade-colors-neutrals-50);
        &:after {
          background: var(--jade-colors-neutrals-300);
        }
      }
    }
  }
  &.pwr-cta--link.pwr-cta--link {
  /* overrides */
    a.pwr-cta_button {
      color: var(--jade-colors-neutrals-900);
      border: unset;
      padding-block: var(--jade-spacing-2);
      padding-inline: var(--jade-spacing-4);
      margin-right: unset;
      margin-left: unset;
      &::after, &::before {
        all:unset
    
      
      
      
      }
      text-decoration: none;
      color: var(--jade-colors-harakeke-100);
      &:hover {
        color: var(--jade-colors-harakeke-75);
      }
      &:active {
        color: var(--jade-colors-harakeke-125);
      }
      &:disabled {
        color: var(--jade-colors-neutrals-300);
      }
    }
  }
  &.pwr-cta--custom-01,
  &.pwr-cta--custom-02,
  &.pwr-cta--custom-03,
  &.pwr-cta--custom-04 {
  /* overrides */
    a.pwr-cta_button {
      border-top:unset;
      border-left: unset;
      border-right: unset;
      border-color: var(--jade-colors-harakeke-100);
      color: var(--jade-colors-neutrals-700);
      border-bottom: 1px solid;
      padding-inline: unset;
      padding-bottom: unset;
      padding: unset;
      padding-top: unset;
      padding-left: unset;
      padding-right: unset;
      padding-inline: var(--jade-spacing-0);
    
    /* background controls symbol color */
      &::after {
        background:var(--jade-colors-neutrals-700);
      }
      &:hover {
        border-color: var(--jade-colors-harakeke-75);
        color: var(--jade-colors-neutrals-700);
        &:after {
          background: var(--jade-colors-neutrals-700);
        }
      }
      &:active {
        color: var(--jade-colors-neutrals-700);
        border-color: var(--jade-colors-harakeke-125);
        &:after {
          background: var(--jade-colors-neutrals-700);
        }
      }
      &:disabled {
        color: var(--jade-colors-neutrals-300);
        border: none;
        &:after {
          background: var(--jade-colors-neutrals-300);
        }
      }
    }
  }
}
.pwr--dark .pwr-cta:not(:has(.pwr-cta_button--primary,
.pwr-cta_button--secondary,
.pwr-cta_button--tertiary,
.pwr-cta_button--link))  {
  /*.pwr-cta_button--primary*/
  &.pwr-cta--primary-solid, &.pwr-cta--regular-solid-primary-background.pwr-cta--regular-solid-primary-background,  &.pwr-cta--regular-solid {
    a.pwr-cta_button {
      background: var(--jade-colors-ultra-jade-100);
      border-color: var(--jade-colors-neutrals-900);
      color: var(--jade-colors-neutrals-900);

    /* background controls symbol color */
      &::after {
        background: var(--jade-colors-neutrals-900);
      }
      &:hover {
        background: var(--jade-colors-ultra-jade-75);
        border-color: var(--jade-colors-neutrals-900);
        color: var(--jade-colors-neutrals-900);
        &:after {
          background: var(--jade-colors-neutrals-900);
        }
      }
      &:active {
        color: var(--jade-colors-neutrals-900);
        background: var(--jade-colors-ultra-jade-125);
        border-color: var(--jade-colors-neutrals-900);
        &:after {
          background: var(--jade-colors-neutrals-900);
        }
      }
      &:disabled {
        color: var(--jade-colors-neutrals-600);
        background: var(--jade-colors-neutrals-700);
        border-color: var(--jade-colors-neutrals-700);
        &:after {
          background: var(--jade-colors-neutrals-600);
        }
      }
    }
  }
  /*&.pwr-cta_button--secondary*/
  &.pwr-cta--primary-border.pwr-cta--primary-border,
  &.pwr-cta--regular-border.pwr-cta--regular-border {
    a.pwr-cta_button {
      border-color: var(--jade-colors-harakeke-50);
      color: var(--jade-colors-neutrals-50);

    /* background controls symbol color */
      &::after {
        background:var(--jade-colors-neutrals-50);
      }
      &:hover {
        border-color: var(--jade-colors-harakeke-25);
        color: var(--jade-colors-neutrals-white);
        &:after {
          background: var(--jade-colors-neutrals-white);
        }
      }
      &:active {
        color: var(--jade-colors-neutrals-50);
        border-color: var(--jade-colors-harakeke-75);
        &:after {
          background: var(--jade-colors-neutrals-50);
        }
      }
      &:disabled {
        color: var(--jade-colors-neutrals-600);
        border-color: var(--jade-colors-neutrals-700);
        &:after {
          background: var(--jade-colors-neutrals-600);
        }
      }
    }
  }
  /*&.pwr-cta_button--tertiary */
  &.pwr-cta--custom-01,
  &.pwr-cta--custom-02,
  &.pwr-cta--custom-03,
  &.pwr-cta--custom-04 {
    a.pwr-cta_button {
      border-color: var(--jade-colors-harakeke-50);
      color: var(--jade-colors-neutrals-100);

    /* background controls symbol color */
      &::after {
        background:var(--jade-colors-neutrals-100);
      }
      &:hover {
        border-color: var(--jade-colors-harakeke-25);
        color: var(--jade-colors-neutrals-100);
        &:after {
          background: var(--jade-colors-neutrals-100);
        }
      }
      &:active {
        color: var(--jade-colors-neutrals-100);
        border-color: var(--jade-colors-harakeke-75);
        &:after {
          background: var(--jade-colors-neutrals-100);
        }
      }
      &:disabled {
        color: var(--jade-colors-neutrals-600);
        border: none;
        &:after {
          background: var(--jade-colors-neutrals-600);
        }
      }
    }
  }
    
  /*&.pwr-cta_button--link */
  &.pwr-cta--link.pwr-cta--link {
    a.pwr-cta_button {
      text-decoration: none;
      color: var(--jade-colors-harakeke-50);
      &:hover {
        color: var(--jade-colors-harakeke-25);
      }
      &:active {
        color: var(--jade-colors-harakeke-75);
      }
      &:disabled {
        color: var(--jade-colors-neutrals-600);
      }
    }
  }
}