/* 
 * 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-social-icon{
  display:block;
  width:2.5rem;
  height:2.5rem;
  padding:0;
  transition:background-color 200ms ease-out, color 200ms ease-out, border-color 250ms ease-in-out, outline-color 200ms;
  text-align:center;
  color:1px solid var(--awx-color-accent);
  border:1px solid var(--awx-color-accent);
  border-radius:50%;
  font-size:1.25rem;
  line-height:2.3rem;
}

.awx-social-icon:hover{
    color:var(--awx-color-accent-hover);
    border:1px solid var(--awx-color-accent-hover);
  }

.awx-social-icon:hover .awx-icon{
      fill:var(--awx-color-accent-hover);
    }

.awx-social-icon:focus{
    color:var(--awx-color-focus);
    border:1px solid var(--awx-color-focus);
  }

.awx-social-icon:focus .awx-icon{
      fill:var(--awx-color-focus);
    }

.awx-social-icon:active,.awx-social-icon.is-active{
    color:var(--awx-color-accent-active);
    border:1px solid var(--awx-color-accent-active);
  }

.awx-social-icon:active .awx-icon{
      fill:var(--awx-color-accent-active);
    }

.awx-social-icon.is-active .awx-icon{
      fill:var(--awx-color-accent-active);
    }

.awx-social-icon::after,.awx-social-icon::before{
    display:none !important;
  }

.awx-social-icon--dark{
  color:var(--awx-color-text-light) !important;
  border-color:var(--awx-color-light-line);
  background-color:transparent;
}

.awx-social-icon--dark:hover{
    color:var(--awx-color-dominant) !important;
    border-color:var(--awx-color-text-light);
    background-color:var(--awx-color-text-light);
  }

.awx-social-icon--dark:hover .awx-icon{
      fill:var(--awx-color-dominant);
    }

.awx-social-icon--dark:focus{
    color:var(--awx-color-text-light) !important;
    border:1px solid var(--awx-color-text-light);
    outline-color:var(--awx-color-light-line);
  }

.awx-social-icon--dark:focus .awx-icon{
      fill:var(--awx-color-text-light);
    }

.awx-social-icon--dark:active,.awx-social-icon--dark.is-active{
    color:var(--awx-color-dominant-lighter) !important;
    border:1px solid var(--awx-color-dominant-lighter);
  }

.awx-social-icon--dark:active .awx-icon{
      fill:var(--awx-color-dominant-lighter);
    }

.awx-social-icon--dark.is-active .awx-icon{
      fill:var(--awx-color-dominant-lighter);
    }