:host {

  --button-instagram-background-image: var(--instagram-gradient);

  /* ---  Brand   --- */
  --facebook-hover-color: oklch(from var(--facebook-color) calc(l - 0.05) c calc(h + 10));
  --twitter-hover-color: oklch(from var(--twitter-color) calc(l - 0.05) c calc(h + 10));
  --linked-in-hover-color: oklch(from var(--linked-in-color) calc(l - 0.05) c calc(h + 10));
  --youtube-hover-color: oklch(from var(--youtube-color) calc(l - 0.05) c calc(h + 10));
  --instagram-hover-color: oklch(from var(--instagram-color) calc(l - 0.05) c calc(h + 10));
  --pinterest-hover-color: oklch(from var(--pinterest-color) calc(l - 0.05) c calc(h + 10));

  /* ---  Brand   --- */
  --facebook-down-color: oklch(from var(--facebook-color) calc(l - 0.1) c h);
  --twitter-down-color: oklch(from var(--twitter-color) calc(l - 0.1) c h);
  --linked-in-down-color: oklch(from var(--linked-in-color) calc(l - 0.1) c h);
  --youtube-down-color: oklch(from var(--youtube-color) calc(l - 0.1) c h);
  --instagram-down-color: oklch(from var(--instagram-color) calc(l - 0.1) c h);
  --pinterest-down-color: oklch(from var(--pinterest-color) calc(l - 0.1) c h);

  /* ---  Brand   --- */
  --facebook-focus-color: oklch(from var(--facebook-color) calc(l - 0.08) c calc(h + 15));
  --twitter-focus-color: oklch(from var(--twitter-color) calc(l - 0.08) c calc(h + 15));
  --linked-in-focus-color: oklch(from var(--linked-in-color) calc(l - 0.08) c calc(h + 15));
  --youtube-focus-color: oklch(from var(--youtube-color) calc(l - 0.08) c calc(h + 15));
  --instagram-focus-color: oklch(from var(--instagram-color) calc(l - 0.08) c calc(h + 15));
  --pinterest-focus-color: oklch(from var(--pinterest-color) calc(l - 0.08) c calc(h + 15));

}