.social-button {
  display: inline-flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: none;
  cursor: pointer;

  &--disabled {
    cursor: default;
  }

  &__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--wds-border-radius-full, 24px);
    border: none;
    margin-bottom: var(--wds-space-200, 12px);
    padding: var(--wds-space-150, 9px);
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #ffffff));
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
  }

  &__icon--single {
    margin-bottom: 0;
  }

  &__icon#{&}__icon--disabled {
    background-color: var(
      --wds-color-black-100-transparent-30,
      var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
    );
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80-70, rgba(255, 255, 255, 0.7)));
    cursor: default;
  }

  &__icon .button-core__content {
    line-height: 0;
    min-width: 30px;
    min-height: 30px;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__icon--type-facebook:not(&__icon--disabled) {
    background-color: var(--wds-color-fill-social-facebook, #1877f2);
  }

  @media (hover: hover) {
    &__icon--type-facebook:not(&__icon--disabled):hover {
      background-color: var(--wds-color-fill-social-facebook-hover, rgba(24, 119, 242, 0.8));
    }
  }

  &__icon--type-facebook#{&}__icon--disabled {
    background-color: var(
      --wds-color-fill-social-facebook-disabled,
      var(--wds-color-black-100-transparent-30, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)))
    );
  }

  &__icon--type-twitter:not(&__icon--disabled) {
    background-color: var(--wds-color-fill-social-twitter, #1da1f2);
  }

  @media (hover: hover) {
    &__icon--type-twitter:not(&__icon--disabled):hover {
      background-color: var(--wds-color-fill-social-twitter-hover, rgba(29, 161, 242, 0.8));
    }
  }

  &__icon--type-twitter#{&}__icon--disabled {
    background-color: var(
      --wds-color-fill-social-twitter-disabled,
      var(--wds-color-black-100-transparent-30, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)))
    );
  }

  &__icon--type-linkedin:not(&__icon--disabled) {
    background-color: var(--wds-color-fill-social-linkedin, #0065c8);
  }

  @media (hover: hover) {
    &__icon--type-linkedin:not(&__icon--disabled):hover {
      background-color: var(--wds-color-fill-social-linkedin-hover, rgba(0, 101, 200, 0.8));
    }
  }

  &__icon--type-linkedin#{&}__icon--disabled {
    background-color: var(
      --wds-color-fill-social-linkedin-disabled,
      var(--wds-color-black-100-transparent-30, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)))
    );
  }

  &__icon--type-instagram:not(&__icon--disabled) {
    background-color: var(--wds-color-fill-social-instagram, #ff0175);
  }

  @media (hover: hover) {
    &__icon--type-instagram:not(&__icon--disabled):hover {
      background-color: var(--wds-color-fill-social-instagram-hover, rgba(255, 1, 117, 0.8));
    }
  }

  &__icon--type-instagram#{&}__icon--disabled {
    background-color: var(
      --wds-color-fill-social-instagram-disabled,
      var(--wds-color-black-100-transparent-30, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)))
    );
  }

  &__icon--type-pinterest:not(&__icon--disabled) {
    background-color: var(--wds-color-fill-social-pinterest, #e60019);
  }

  @media (hover: hover) {
    &__icon--type-pinterest:not(&__icon--disabled):hover {
      background-color: var(--wds-color-fill-social-pinterest-hover, rgba(230, 0, 25, 0.8));
    }
  }

  &__icon--type-pinterest#{&}__icon--disabled {
    background-color: var(
      --wds-color-fill-social-pinterest-disabled,
      var(--wds-color-black-100-transparent-30, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)))
    );
  }

  &__icon--type-youtube:not(&__icon--disabled) {
    background-color: var(--wds-color-fill-social-youtube, #ff0000);
  }

  @media (hover: hover) {
    &__icon--type-youtube:not(&__icon--disabled):hover {
      background-color: var(--wds-color-fill-social-youtube-hover, rgba(255, 0, 0, 0.8));
    }
  }

  &__icon--type-youtube#{&}__icon--disabled {
    background-color: var(
      --wds-color-fill-social-youtube-disabled,
      var(--wds-color-black-100-transparent-30, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)))
    );
  }

  &__icon--type-xcorp:not(&__icon--disabled) {
    background-color: var(--wds-color-fill-social-xcorp, #101419);
  }

  @media (hover: hover) {
    &__icon--type-xcorp:not(&__icon--disabled):hover {
      background-color: var(--wds-color-fill-social-xcorp-hover, rgba(16, 20, 25, 0.8));
    }
  }

  &__icon--type-xcorp#{&}__icon--disabled {
    background-color: var(
      --wds-color-fill-social-xcorp-disabled,
      var(--wds-color-black-100-transparent-30, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)))
    );
  }

  &__icon--type-tiktok:not(&__icon--disabled) {
    background-color: var(--wds-color-fill-social-tiktok, #010101);
  }

  @media (hover: hover) {
    &__icon--type-tiktok:not(&__icon--disabled):hover {
      background-color: var(--wds-color-fill-social-tiktok-hover, rgba(1, 1, 1, 0.8));
    }
  }

  &__icon--type-tiktok#{&}__icon--disabled {
    background-color: var(
      --wds-color-fill-social-tiktok-disabled,
      var(--wds-color-black-100-transparent-30, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)))
    );
  }
}