/* 
 * 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-step{
  position:relative;
  display:block;
  margin:0 0 var(--awx-sp-v);
  padding:var(--awx-sp-v) var(--awx-sp-h);
  color:var(--awx-color-text);
  border-left:1px solid var(--awx-color-dark-line);
  background-color:var(--awx-white);
}

.awx-step:last-of-type{
    margin:0;
  }

.awx-step::after{
    position:absolute;
    top:0;
    bottom:100%;
    left:-1px;
    width:1px;
    content:"";
    transition:top 200ms ease-in-out 50ms, bottom 200ms ease-in-out 50ms;
    background-color:var(--awx-color-dominant);
  }

.awx-step:hover::after,.awx-step:hover:focus{
    top:var(--awx-sp-v1-5);
    bottom:var(--awx-sp-v1-5);
  }

.awx-step__index{
  float:left;
  min-width:calc(4.75rem + 0.5vw - var(--awx-sp-h));
  margin-right:var(--awx-sp-h);
  text-align:center;
  letter-spacing:-0.025rem;
  color:var(--awx-color-accent);
  font-size:calc(3rem + 0.5vw);
  font-weight:400;
  line-height:1.1;
}

.awx-step__headline{
  display:block;
  margin-top:var(--awx-sp-v0-25) !important;
  margin-bottom:var(--awx-sp-v0-25) !important;
  margin-left:calc(4.75rem + 0.5vw);
  letter-spacing:-0.025rem;
  color:var(--awx-color-accent);
  font-size:calc(1.275rem + 0.3vw);
  font-weight:400;
  line-height:1.2;
}

.awx-step__description{
  margin-left:calc(4.75rem + 0.5vw);
  color:var(--awx-color-dominant-gray);
}

.awx-step--light-gray{
  background-color:var(--awx-color-dominant-lighter);
}

.awx-step--dark{
  color:var(--awx-color-text-light);
  border-left-color:var(--awx-color-light-line);
  background-color:var(--awx-color-dominant-dark);
}

.awx-step--dark::after{
    background-color:var(--awx-white);
  }

.awx-step--dark .awx-step__headline,.awx-step--dark .awx-step__index{
    color:var(--awx-color-text-light);
  }

.awx-step--dark .awx-step__description{
    color:var(--awx-color-link-light-active);
  }