/* ===================================================
   BUTTONS STYLESHEET - GROUPED, ORIGINAL CSS PRESERVED
   =================================================== */


/* ===========
   BASE BUTTON
   =========== */
a.btn,
.a_btn,
button[type="submit"],
input[type="submit"],
a#CookieDeclarationChangeConsentChange,
a#CookieDeclarationChangeConsentWithdraw {
  position: relative;
  display: inline-block;
  padding: 0.75em 2em;
  border: none;
  font-weight: 400;
  background: transparent;
  color: inherit;
  border-radius: 2em;
  font-size: 1em;
  z-index: 1;
  cursor: pointer;
  transition: color 0.4s; }

/* ===============
   GRADIENT BORDER
   =============== */
a.btn::before,
.a_btn::before,
.nav__main .button a.primary span::before,
a#CookieDeclarationChangeConsentChange::before,
a#CookieDeclarationChangeConsentWithdraw::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2em;
  padding: 2px;
  background: var(--gradient__blue);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

a.btn__var__green::before {
  background: var(--gradient__green);
}

/* ======
   ICONS
   ====== */
a.btn::after,
.a_btn::after,
a#CookieDeclarationChangeConsentChange::after,
a#CookieDeclarationChangeConsentWithdraw::after {
  content: '';
  position: relative;
  display: inline-block;
  width: 8px;
  height: 13px;
  margin-left: 1em;
  z-index: 1;
  transform: translate(0,.1em);
  background-size: 8px 13px;
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='13' viewBox='0 0 9 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%2327A7D6' points='1.454 0 8 6.5 1.454 13 0 11.556 5.091 6.5 0 1.444'/%3E%3C/svg%3E");
  transition: transform 0.4s;
}

/* ================
   HOVER BACKGROUND
   ================ */
a.btn span,
.a_btn span {
  position: absolute;
  inset: 0;
  border-radius: 2em;
  background: var(--color__blue__1);
  opacity: 0;
  transition: opacity 1s;
  z-index: -1;
  pointer-events: none;
}

a.btn__var__green span {
  background: var(--color__green__2);
}

/* ===========
   PRIMARY BTN
   =========== */
a.btn__primary,
button[type="submit"],
input[type="submit"],
a#CookieDeclarationChangeConsentChange {
  color: var(--color__white);
  background: var(--gradient__blue);
  transition: color 0.4s;
}

/* ============
   SECONDARY BTN
   ============ */
a.btn__secondary,
a#CookieDeclarationChangeConsentWithdraw {
  padding: 0.75em 0;
  border-radius: 0;
}

a.btn__secondary::before,
a#CookieDeclarationChangeConsentWithdraw::before {
  /* Unset masking and border */
  position: absolute;
  background: var(--color__blue__2);
  inset: unset;
  border-radius: 0;
  padding: 0;
  -webkit-mask: unset;
  -webkit-mask-composite: unset;
  mask: unset;
  mask-composite: unset;
  height: 1px;
  z-index: 1;
  width: 100%;
  bottom: 0;
}

/* ===============
   GREEN VARIANT
   =============== */
a.btn__var__green {
  color: var(--color__white);
  background: var(--gradient__green);
}

/* ==============
   FULL WIDTH BTNS
   ============== */
a.btn__full-width {
  width: 100%;
  text-align: center; }

a.btn__full-width-flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
  
a.btn__full-width-flex::after {
  transform: translate(0, .25em);
}
 
a.btn__full-width-flex:hover::after { 
  transform: translate(.25em, .25em) !important;
}
  
/* ===========
   HOVER STATES
   =========== */
a.btn:hover {
  color: #fff;
}

a.btn:hover,
.nav__main .button a.primary:hover span {
  background: var(--gradient__blue);
}

a.btn__var__green:hover {
  background: var(--gradient__green);
}
    

a.btn:hover span {
  opacity: 1;
}

a.btn__secondary:hover {
  background: none;
  color: var(--color__gray__30); }


/* Hover: Icon */
a.btn:hover::after,
.a_btn:hover::after,
a#CookieDeclarationChangeConsentChange:hover::after,
a#CookieDeclarationChangeConsentWithdraw:hover::after  {
  transform: translate(.2em,.1em);
}
  
/* ================
   CHEVRON VARIANTS
   ================ */
/* white chevron */
a.btn__primary::after,
a.btn__var__green::after,
.m__theme__navy a.btn__secondary::after,
button[type="submit"]::after,
input[type="submit"]::after,
a#CookieDeclarationChangeConsentChange::after {
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='13' viewBox='0 0 9 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23FFF' points='1.454 0 8 6.5 1.454 13 0 11.556 5.091 6.5 0 1.444'/%3E%3C/svg%3E");
}

/* Blue chevron */  
a.btn:hover::after,
a#CookieDeclarationChangeConsentWithdraw::after {
   background-image: url("data:image/svg+xml,%3Csvg width='9' height='13' viewBox='0 0 9 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23FFF' points='1.454 0 8 6.5 1.454 13 0 11.556 5.091 6.5 0 1.444'/%3E%3C/svg%3E");
}

a.btn__secondary::after,
a.btn__secondary:hover::after,
a#CookieDeclarationChangeConsentWithdraw::after {
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='13' viewBox='0 0 9 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23000829' points='1.454 0 8 6.5 1.454 13 0 11.556 5.091 6.5 0 1.444'/%3E%3C/svg%3E"); }

.m__theme__navy a.btn__secondary:hover::after {
background-image: url("data:image/svg+xml,%3Csvg width='9' height='13' viewBox='0 0 9 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23FFFFFF' points='1.454 0 8 6.5 1.454 13 0 11.556 5.091 6.5 0 1.444'/%3E%3C/svg%3E"); }


/* ================
   SUBMIT BTN ICONS
   ================ */
button[type="submit"], 
input[type="submit"] {
  padding-right: 3.5em; 
  background: none;
  background-image:
       url("data:image/svg+xml,%3Csvg width='9px' height='13px' viewBox='0 0 9 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' fill='none' transform='translate(0.9801, 0)' fill-rule='nonzero'%3E%3Cpolygon id='Path' fill='%23FFFFFF' points='1.45437 0 8 6.500024 1.45437 13.000034 0 11.555634 5.09058 6.499974 0 1.444274'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E"),
      var(--gradient__blue);
  background-repeat: no-repeat, no-repeat;
  background-size: 8px 13px, cover;
  transition: background .4s;
  background-position: right 1.75em center, left top;
}

button[type="submit"]:hover, 
input[type="submit"]:hover {
  background-position: right 1.5em center, left top;
}

/* ===============================
   ARTICLES: HEADER REVERSED (RESP)
   =============================== */
@media (max-width:600px) {
  .article .article__header .btn__secondary:hover {
    color: var(--color__white);
  }
    
  .article .article__header .btn__secondary::after {
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='13' viewBox='0 0 9 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23FFFFFF' points='1.454 0 8 6.5 1.454 13 0 11.556 5.091 6.5 0 1.444'/%3E%3C/svg%3E");
  }
}