/*
File: social-icons.css (converted from _social-icons.scss)
This file is for the inline social icon styles from the [rf_social_media] shortcode
*/

:root {
  --icon-size: var(--size-medium);
}

.rf-social-icons-inline .ul-social-et {
  display: flex;
  list-style-type: none;
  padding: 0;
}

.rf-social-icons-inline .ul-social-et .et-social-icon {
  margin: 0 var(--size-medium) 0 0;
}

.rf-social-icons-inline .ul-social-et .et-social-icon:last-child {
  margin: 0;
}

.rf-social-icons-inline .ul-social-et .et-social-icon a {
  font-size: var(--icon-size);
  /* The code below is used to make the icons into circle buttons */
  width: calc(var(--size-large) - 0.25rem);
  height: calc(var(--size-large) - 0.25rem);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  border-style: solid;
  border-width: 0.125rem;
}

.rf-social-icons-inline .ul-social-et .et-social-icon a::before {
  position: relative;
}

.rf-social-icons-inline .ul-social-et .et-social-icon span {
  /* a11y-hidden mixin expanded */
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}