/*!*************************
*****     socicons     *****
***************************/

@layer {
  @scope ([data-component-id$=":socicon"]) {
    /*background-color: hotpink;*/
    margin: var(--sp-1);
    display: block;
    color: var(--clr-fg-500);
    transition: color var(--speed-300);

    &:hover {
      color: var(--clr-primary-500);
      transition: color var(--speed-300);
    }
  }
}

/* .social-network-icons {} */