ihk24/gfi-ihk-2024/stories/atoms/social-icons/social-icons.scss

@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

.social-icons {
  --color-twitter: #101419;
  --color-youtube: #FF0000;
  --color-linkedin: #2867B2;
  --color-instagram: #DD3076;
  --color-facebook: #1877F2;
  --color-xing: #126567;
  --color-threema: #05a63f;
  --color-telegram: #0088cc;
  --color-whatsapp: #25D366;
  --color-pinterest: #FF0000;
  --social-icon-size: 50px;
  --social-icon-distance: 15px;

  @media(max-width: 767px) {
    --social-icon-size: 44px;
    --social-icon-distance: 10px;
  }

  margin: 0 0 calc(var(--social-icon-distance) * -1) calc(var(--social-icon-distance) * -1);
  padding: 0;
  font-size: 0;
  line-height: 0;

  li {
    display: inline-block;
    vertical-align: top;
    margin-left: var(--social-icon-distance);
    margin-bottom: var(--social-icon-distance);
  }

  a {
    position: relative;
    display: block;
    width: var(--social-icon-size);
    height: var(--social-icon-size);
    color: var(--theme-color-white);
    text-decoration: none;
    text-align: center;
    font-size: 0;
    line-height: 0;
    transition: 0.3s ease;
    z-index: 1;
    overflow: hidden;
    @include focus-visible;

    &:before {
      display: block;
      font-size: calc(var(--social-icon-size) + 2px);
      line-height: calc(var(--social-icon-size) + 2px);
      font-family: "Icons", sans-serif;
      margin: -1px;
      background-color: var(--theme-color-white);
    }

    &.facebook::before {
      @include icon-social-facebook;
      color: var(--color-facebook);
    }
    &.twitter::before {
      @include icon-social-twitter;
      color: var(--color-twitter);
    }
    &.linkedin::before {
      @include icon-social-linkedin;
      color: var(--color-linkedin);
    }
    &.youtube::before {
      @include icon-social-youtube;
      color: var(--color-youtube);
    }
    &.instagram::before {
      @include icon-social-instagram;
      color: var(--color-instagram);
    }
    &.xing::before {
      @include icon-social-xing;
      color: var(--color-xing);
    }
    &.threema::before {
      @include icon-social-threema;
      color: var(--color-threema);
    }
    &.telegram::before {
      @include icon-social-telegram;
      color: var(--color-telegram);
    }
    &.whatsapp::before {
      @include icon-social-whatsapp;
      color: var(--color-whatsapp);
    }
    &.pinterest::before {
      @include icon-social-pinterest;
      color: var(--color-pinterest);
    }
  }
}