/* 
 * DO NOT EDIT THIS FILE.
 * The Airbus Web Experience use PostCSS to compile CSS
 * the same way as in the Drupal core except it use the .pcss extension.
 * Therefore, you are supposed to edit the pcss file of the same name.
 */

.awx-button{
  position:relative;
  display:inline-block;
  height:var(--awx-sp-v3);
  margin:0;
  padding:0 var(--awx-sp-h);
  cursor:pointer;
  transition:color 200ms, background-color 200ms, border-color 200ms, outline-color 200ms;
  text-align:center;
  white-space:nowrap;
  -webkit-text-decoration:none;
  text-decoration:none;
  color:var(--awx-button-color-text) !important;
  border:0 solid;
  border-color:var(--awx-button-color-border);
  border-radius:var(--awx-border-radius);
  outline-color:transparent;
  background-color:var(--awx-button-color);
  box-shadow:none !important;
  text-shadow:none !important;
  font-size:1rem;
  font-weight:700;
  line-height:var(--awx-sp-v3);
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  -webkit-font-smoothing:antialiased;
}

.awx-button::before{
    position:absolute;
    content:"";
    box-shadow:0 0 3em -0.2em var(--awx-color-dominant-shadow);
    top:0;
    right:0;
    bottom:0;
    left:0;
    mix-blend-mode:multiply;
  }

.awx-button[target="_blank"]::after{
    filter:brightness(8%) sepia(88%) hue-rotate(180deg) saturate(1100%) !important;
  }

.awx-button.awx-icon--white[target="_blank"]::after{
    filter:brightness(100%) !important;
  }

.awx-button:hover,.awx-button:focus,.awx-button:focus-visible{
    -webkit-text-decoration:none;
    text-decoration:none;
    color:var(--awx-button-color-text-hover) !important;
    border-color:var(--awx-button-color-border-hover);
    background-color:var(--awx-button-color-hover);
  }

.awx-button[target="_blank"]:hover::after{
      filter:brightness(8%) sepia(88%) hue-rotate(180deg) saturate(1100%) !important;
    }

.awx-button[target="_blank"]:focus::after{
      filter:brightness(8%) sepia(88%) hue-rotate(180deg) saturate(1100%) !important;
    }

.awx-button[target="_blank"]:focus-visible::after{
      filter:brightness(8%) sepia(88%) hue-rotate(180deg) saturate(1100%) !important;
    }

.awx-button:focus,.awx-button:focus-visible{
    outline-color:var(--awx-color-focus);
  }

.awx-button:active,.awx-button.is-active{
    -webkit-text-decoration:none;
    text-decoration:none;
    color:var(--awx-button-color-text-active) !important;
    border-color:var(--awx-button-color-border-active);
    background-color:var(--awx-button-color-active);
  }

.awx-button:disabled,.awx-button.is-disabled{
    cursor:default;
    pointer-events:none;
    color:var(--awx-button-color-text-disabled) !important;
    border-color:var(--awx-button-color-border-disabled);
    background-color:var(--awx-button-color-disabled);
  }

.awx-button.is-inactive{
    color:var(--awx-button-color-text) !important;
    border-color:var(--awx-button-color);
    background-color:var(--awx-button-color);
  }

.awx-button__primary{
  color:var(--awx-button-primary-color-text) !important;
  border-color:var(--awx-button-primary-color-border);
  background-color:var(--awx-button-primary-color);
}

.awx-button__primary[target="_blank"]::after{
    filter:grayscale(1) !important;
  }

.awx-button__primary:hover,.awx-button__primary:focus,.awx-button__primary:focus-visible{
    color:var(--awx-button-primary-color-text-hover) !important;
    border-color:var(--awx-button-primary-color-border-hover);
    background-color:var(--awx-button-primary-color-hover);
  }

.awx-button__primary[target="_blank"]:hover::after{
      filter:grayscale(1) !important;
    }

.awx-button__primary[target="_blank"]:focus::after{
      filter:grayscale(1) !important;
    }

.awx-button__primary[target="_blank"]:focus-visible::after{
      filter:grayscale(1) !important;
    }

.awx-button__primary:active,.awx-button__primary.is-active{
    color:var(--awx-button-primary-color-text-active) !important;
    border-color:var(--awx-button-primary-color-border-active);
    background-color:var(--awx-button-primary-color-active);
  }

.awx-button__primary:disabled,.awx-button__primary.is-disabled{
    color:var(--awx-button-primary-color-text-disabled) !important;
    border-color:var(--awx-button-primary-color-border-disabled);
    background-color:var(--awx-button-primary-color-disabled);
    mix-blend-mode:overlay;
  }

.awx-button__primary.is-inactive{
    color:var(--awx-button-color-text) !important;
    border-color:var(--awx-button-color);
    background-color:var(--awx-button-color);
  }

.awx-button__secondary{
  padding:0 !important;
  border-color:transparent !important;
  background-color:transparent !important;
  line-height:var(--awx-line-height);
}

.awx-button__secondary::before{
    display:none;
    box-shadow:none;
  }

.awx-button__secondary:hover,.awx-button__secondary:focus,.awx-button__secondary:focus-visible{
    color:var(--awx-button-secondary-color-text-hover) !important;
    border-color:transparent !important;
    background-color:transparent !important;
  }

.awx-button__secondary:active,.awx-button__secondary.is-active{
    color:var(--awx-button-secondary-color-text-active) !important;
    border-color:transparent !important;
    background-color:transparent !important;
  }

.awx-button__secondary:disabled,.awx-button__secondary.is-disabled{
    color:var(--awx-button-color-text-disabled) !important;
    border-color:transparent !important;
    background-color:transparent !important;
  }

.awx-button__secondary.is-inactive{
    color:var(--awx-button-color-text) !important;
    border-color:transparent !important;
    background-color:transparent !important;
  }

.awx-button__secondary--light{
  padding:0 !important;
  color:var(--awx-button-primary-color-text) !important;
  border-color:transparent !important;
  background-color:transparent !important;
}

.awx-button__secondary--light::before{
    display:none;
    box-shadow:none;
  }

.awx-button__secondary--light[target="_blank"]::after{
    filter:grayscale(1) !important;
  }

.awx-button__secondary--light:hover,.awx-button__secondary--light:focus,.awx-button__secondary--light:focus-visible{
    color:var(--awx-button-secondary-light-color-text-hover) !important;
    border-color:transparent !important;
    background-color:transparent !important;
  }

.awx-button__secondary--light:active,.awx-button__secondary--light.is-active{
    color:var(--awx-button-secondary-light-color-text-active) !important;
    border-color:transparent !important;
    background-color:transparent !important;
  }

.awx-button__secondary--light:disabled,.awx-button__secondary--light.is-disabled{
    color:var(--awx-button-primary-color-text-disabled) !important;
    border-color:transparent !important;
    background-color:transparent !important;
  }

.awx-button__large{
  height:var(--awx-sp-v4);
  padding:0 var(--awx-sp-h1-5);
  font-size:1.125rem;
  line-height:var(--awx-sp-v4);
}

.awx-button__small{
  height:var(--awx-sp-v2-5);
  padding:0 var(--awx-sp-h0-75);
  font-size:0.875rem;
  line-height:var(--awx-sp-v2-5);
}

.awx-button__xsmall{
  height:var(--awx-sp-v1-5);
  padding:0 var(--awx-sp-h0-5);
  font-size:0.75rem;
  line-height:var(--awx-sp-v1-5);
}

.awx-button--inline-height{
  height:auto !important;
  padding:0 !important;
  line-height:var(--awx-line-height) !important;
}

.awx-button__border{
  border-width:1px;
  line-height:calc(var(--awx-sp-v3) - 3px);
}

.awx-button__border.awx-button__large{
    line-height:calc(var(--awx-sp-v4) - 3px);
  }

.awx-button__border.awx-button__small{
    line-height:calc(var(--awx-sp-v2-5) - 3px);
  }

.awx-button__border.awx-button__xsmall{
    line-height:calc(var(--awx-sp-v1-5) - 2px);
  }

.awx-button__margin{
  margin:var(--awx-sp-v) var(--awx-sp-h);
}

.awx-button__margin.awx-button__large{
    margin:var(--awx-sp-v1-5) var(--awx-sp-h2);
  }

.awx-button__margin.awx-button__small{
    margin:var(--awx-sp-v0-5) var(--awx-sp-h0-5);
  }

.awx-button__margin.awx-button__xsmall{
    margin:var(--awx-sp-v0-25) var(--awx-sp-h0-25);
  }

.awx-button--icon-before .awx-button__label{
    margin-left:0.5em;
  }

.awx-button--icon-after .awx-button__label{
    margin-right:0.5em;
  }

.awx-button--round{
  width:var(--awx-sp-v3);
  padding-right:0;
  padding-left:0;
  text-align:center;
  border-radius:50%;
  font-size:0.875rem;
}

.awx-button--round::before,.awx-button--round::after{
    border-radius:50%;
  }

@media (min-width: 48em){
  .awx-button{
    font-size:1rem;
  }

    .awx-button.awx-button__large{
      font-size:1.25rem;
    }

    .awx-button.awx-button__small{
      font-size:0.875rem;
    }

    .awx-button.awx-button__xsmall{
      font-size:0.75rem;
    }
}

@media (min-width: 64em){
    .awx-button--icon--animated .awx-button__label{
      display:inline-block;
      transition:transform 200ms var(--awx-ease-in-out) 200ms;
      transform:translateX(0.65em);
    }

      .awx-button--icon--animated .awx-button__label.is-opposite{
        transform:translateX(-0.65em);
      }

    .awx-button--icon--animated .awx-icon{
      transition:opacity 600ms var(--awx-ease-in-out) 0ms;
      opacity:0;
    }
    .awx-button--icon--animated:active .awx-button__label{
      transition-delay:0ms;
      transform:translateX(0);
    }
    .awx-button--icon--animated:hover .awx-button__label,.awx-button--icon--animated:focus .awx-button__label{
      transition-delay:0ms;
      transform:translateX(0);
    }

    .awx-button--icon--animated:active .awx-icon{
      transition-delay:0ms;
      opacity:1;
    }

    .awx-button--icon--animated:hover .awx-icon,.awx-button--icon--animated:focus .awx-icon{
      transition-delay:0ms;
      opacity:1;
    }
}