/* 
 * 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.
 */

.pattern-preview__markup--figure_item .awx-figure{
  margin:var(--awx-sp-v) auto;
}

.awx-figure,
.awx-figure__link{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  width:200px;
  height:165px;
  padding:var(--awx-sp-v) var(--awx-sp-h);
  color:var(--awx-color-text);
  border:1px solid var(--awx-color-dominant-lighter);
  border-radius:var(--awx-border-radius);
  background-color:var(--awx-white);
}

.awx-figure .awx-icon,.awx-figure__link .awx-icon,.awx-figure .awx-icon-content,.awx-figure__link .awx-icon-content{
    position:absolute;
    top:var(--awx-sp-v);
    right:var(--awx-sp-h);
    font-size:2rem;
  }

.awx-figure .awx-stock-price__last-update,.awx-figure__link .awx-stock-price__last-update{
    top:6.5em;
    left:0;
    padding:var(--awx-sp-v) var(--awx-sp-h);
    color:currentColor;
    border-radius:0;
    background-color:transparent;
    box-shadow:none;
    font-size:0.625rem;
  }

.awx-figure .awx-stock-price__last-update::before{
      display:none;
    }

.awx-figure__link .awx-stock-price__last-update::before{
      display:none;
    }

.awx-figure{
  transition:transform 400ms var(--awx-ease-in-out);
}

.awx-figure::after{
    position:absolute;
    z-index:2;
    bottom:0;
    left:0;
    width:0;
    height:1px;
    content:"";
    transition:width 600ms var(--awx-ease-in-out), opacity 200ms var(--awx-ease-in-out);
    opacity:0;
    background-color:var(--awx-color-text);
  }

.awx-figure:hover{
  transform:translateY(-10px);
}

.awx-figure:hover::after{
    width:100%;
    opacity:1;
  }

.awx-figure:hover .awx-stock-price__last-update{
    display:block;
  }

.awx-figure.has-link{
  display:block;
  padding:0;
}

.awx-figure__link{
  -webkit-text-decoration:none !important;
  text-decoration:none !important;
  color:currentColor !important;
}

.awx-figure__link::after{
  display:none !important;
}

.awx-figure__description{
  position:absolute;
  top:var(--awx-sp-v);
  display:block;
  flex:auto;
  max-width:69%;
  text-transform:uppercase;
  font-size:0.625rem;
  line-height:var(--awx-line-height);
}

.awx-figure__value{
  display:block;
  margin:0;
}

.awx-figure__value.awx-kf{
    gap:0.25rem;
  }

.awx-figure__label{
  margin:0;
  font-size:0.875rem;
}

.awx-figure--light-gray,
.awx-figure--light-gray .awx-figure__link{
  border-color:transparent;
  background-color:var(--awx-color-dominant-lighter);
}

.awx-figure--dark,
.awx-figure--dark .awx-figure__link{
  color:var(--awx-color-text-light);
  border-color:transparent;
  background-color:var(--awx-color-dominant-dark);
}

.awx-figure--dark::after{
  background-color:var(--awx-color-text-light);
}

@media (min-width: 64em){
  .awx-figure,
  .awx-figure__link{
    width:300px;
    height:225px;
  }

    .awx-figure .awx-icon,.awx-figure__link .awx-icon,.awx-figure .awx-icon-content,.awx-figure__link .awx-icon-content{
      font-size:2.5rem;
    }

    .awx-figure .awx-stock-price__last-update,.awx-figure__link .awx-stock-price__last-update{
      top:6.25em;
      font-size:0.875rem;
    }

  .awx-figure__description{
    font-size:1rem;
  }

  .awx-figure__value{
    font-size:2.25rem;
  }

  .awx-figure__label{
    font-size:1.125rem;
  }
}