:root,
* {
  --tul-components-icon-facebook-blue: #0865fe;
  --tul-components-icon-facebook-white: #ffffff;
  --tul-components-icon-facebook-black: #000000;
  --tul-components-icon-x-twitter-black: #000000;
  --tul-components-icon-x-twitter-white: #ffffff;
  --tul-components-icon-linkedin-blue: #0a66c2;
  --tul-components-icon-linkedin-white: #ffffff;
  --tul-components-icon-linkedin-black: #000000;
}
svg.tul-icon.tul-icon-mode-brand path {
  fill: var(--tul-components-color-main);
}
svg.tul-icon.tul-icon-mode-dark path {
  fill: #000000;
}
svg.tul-icon.tul-icon-mode-light path {
  fill: #ffffff;
}

svg.tul-icon.tul-icon-mode-brand[class*="-facebook-"] path {
  fill: var(--tul-components-icon-facebook-blue);
}
svg.tul-icon.tul-icon-mode-dark[class*="-facebook-"] path {
  fill: var(--tul-components-icon-facebook-black);
}
svg.tul-icon.tul-icon-mode-light[class*="-facebook-"] path {
  fill: var(--tul-components-icon-facebook-white);
}



svg.tul-icon.tul-icon-mode-brand[class*="-x-twitter"] path {
  fill: var(--tul-components-icon-x-twitter-black);
}
svg.tul-icon.tul-icon-mode-dark[class*="-x-twitter"] path {
  fill: var(--tul-components-icon-x-twitter-black);
}
svg.tul-icon.tul-icon-mode-light[class*="-x-twitter"] path {
  fill: var(--tul-components-icon-x-twitter-white);
}


svg.tul-icon.tul-icon-mode-brand[class*="-linkedin-"] path {
  fill: var(--tul-components-icon-linkedin-blue);
}
svg.tul-icon.tul-icon-mode-dark[class*="-linkedin-"] path {
  fill: var(--tul-components-icon-linkedin-black);
}
svg.tul-icon.tul-icon-mode-light[class*="-linkedin-"] path {
  fill: var(--tul-components-icon-linkedin-white);
}