/* social.st.css */
@namespace "Social";

/* = Project info and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    tablet,
    --spacing-unit
}

/* Import style API */
:import {
  -st-from: "../../components/Social/social.st.css";
  -st-default: Social;
}

:import {
  -st-from: "../../mixins/boxShadowFocus.st.css";
  -st-default: BoxShadowFocus;
}

@st-scope Base {
  Social {
    margin: 0;
    padding: 0;
    display: flex;
  }

  Social::item {
    padding: 2px;
    display: inline-flex;
  }

  Social::anchor {
    display: block;
    width: 30px;
    height: 30px;
    margin-right: calc(var(--spacing-unit) * 3);
    touch-action: manipulation;
  }

  Social::anchor svg {
    transition: color .3s ease;
  }

  Social::anchor:focus-visible {
    -st-mixin: BoxShadowFocus;
  }

  Social::socialIcon svg {
    width: 30px;
    height: 30px;
  }
}

@st-scope [dir=rtl] Base {
  Social::anchor {
    margin-right: 0;
    margin-left: calc(var(--spacing-unit) * 3);
  }
}