// CORES DE TODAS AS BRANDS DAS REDES SOCIAIS
$brand-colors: (
  facebook: #3b5998,
  instagram: #e1306c,
  linkedin: #0077b5,
  whatsapp: #25d366,
  twitter: #1da1f2,
  youtube: #ff0000,
);

// MIXIN DA CONFIGURAÇÃO DAS CORES E BORDAS DOS BOTÕES
@mixin social-variant($color, $border: false, $border-direction: "right") {
  background-color: $color;
  color: white;

  @if $border == true {
    @if $border-direction == "left" {
      border-right: 5px solid lighten($color: $color, $amount: 25);
    } @else {
      border-left: 5px solid lighten($color: $color, $amount: 25);
    }
  }
}

// MIXIN DA CONFIGURAÇÃO DA SETA DOS TOOLTIPS
@mixin tooltip-border-variant($color, $side: "left") {
  @if $side == "left" {
    border-right-color: $color;
  } @else {
    border-left-color: $color;
  }
}

// MIXIN DA CONFIGURAÇÃO DA POSIÇÃO DO POPUP
@mixin position-variant($position: "left") {
  @if $position == "left" {
    left: 0;

    & > .social-medias {
      > .social-item {
        a {
          transform-origin: left;

          &:hover {
            .tooltip {
              opacity: 1;
              transform: translate(30%, -50%);
            }
          }

          @each $brand, $color in $brand-colors {
            &.brand-#{$brand} {
              @include social-variant($color, true, "left");
            }
          }

          @each $brand, $color in $brand-colors {
            &.brand-#{$brand} .tooltip {
              @include social-variant($color);

              &::after {
                @include tooltip-border-variant($color, "left");
              }
            }
          }

          .tooltip {
            left: 110%;

            &::after {
              left: -9px;
              border-width: 10px 10px 10px 0;
            }
          }
        }
      }
    }
  } @else {
    right: 0;

    & > .social-medias {
      > .social-item {
        a {
          transform-origin: right;

          &:hover {
            .tooltip {
              opacity: 1;
              transform: translate(-30%, -50%);
            }
          }

          @each $brand, $color in $brand-colors {
            &.brand-#{$brand} {
              @include social-variant($color, true, "right");
            }
          }

          @each $brand, $color in $brand-colors {
            &.brand-#{$brand} .tooltip {
              @include social-variant($color);

              &::after {
                @include tooltip-border-variant($color, "right");
              }
            }
          }

          .tooltip {
            right: 110%;
            opacity: 0;

            &::after {
              right: -9px;
              border-width: 10px 0 10px 10px;
            }
          }
        }
      }
    }
  }
}

.social-media-popups {
  position: fixed;
  z-index: 1020;

  top: 50%;
  transform: translateY(-50%);

  display: none;

  @media (min-width: 768px) {
    display: block;
  }

  &.--align-left {
    // CONFIGURA A POSIÇÃO DO POPUP PARA A ESQUERDA
    @include position-variant($position: "left");
  }

  &.--align-right {
    // CONFIGURA A POSIÇÃO DO POPUP PARA A DIREITA
    @include position-variant($position: "right");
  }

  // ESTILIZAÇÕES PADRÕES
  > .social-medias {
    display: flex;
    flex-direction: column;

    > .social-item {
      a {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 8px;

        transition: transform 0.25s ease;

        &:hover {
          z-index: 1030;
          transform: scale(1.2);
        }

        svg {
          width: 25px;
          height: 25px;
          fill: currentColor;
        }

        .tooltip {
          position: absolute;
          z-index: 1;
          top: 50%;

          display: block;
          transform: translateY(-50%);

          padding: 0.8rem 1rem;
          border-radius: 4px;
          opacity: 0;

          pointer-events: none;

          font-size: 12px;
          font-weight: bold;

          transition: opacity 0.15s ease, transform 0.3s ease;

          &::after {
            content: "";

            position: absolute;
            top: 50%;
            transform: translateY(-50%);

            width: 0;
            height: 0;
            display: block;

            border: solid;
            border-color: transparent;
          }
        }
      }
    }
  }
}

// ↑ ESTILIZAÇÕES DOS POPUPS DOS ÍCONES DAS REDES SOCIAIS NA LATERAL DA PÁGINA

// ↓ ESTILIZAÇÕES DOS BOTÕES DOS ÍCONES DAS REDES SOCIAIS NO FOOTER DA PÁGINA

.social-medias-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;

  @media (min-width: 568px) {
    justify-content: flex-end;
  }

  .social-item {
    margin: 6px 6px;

    a {
      position: relative;

      display: flex;
      align-items: center;
      justify-content: center;

      padding: 12px;

      background-color: white;
      border-radius: 50%;

      box-shadow: 0 0 12px 1px rgba($color: #000000, $alpha: 0.35);

      @each $brand, $color in $brand-colors {
        &.brand-#{$brand} {
          color: $color;

          .tooltip {
            background-color: $color;

            &::after {
              border-top-color: $color;
            }
          }
        }
      }

      transition: transform 0.25s ease;

      @media (min-width: 568px) {
        &:hover {
          .tooltip {
            transform: translate(-50%, -60%);
            opacity: 1;
          }
        }
      }

      svg {
        width: 25px;
        height: 25px;
        fill: currentColor;
      }

      .tooltip {
        position: absolute;
        z-index: 1;
        top: -80%;
        left: 50%;

        display: block;
        transform: translateX(-50%);

        padding: 0.8rem 1rem;
        border-radius: 40px;
        opacity: 0;

        color: white;

        pointer-events: none;

        font-size: 14px;
        font-weight: bold;

        transition: opacity 0.15s ease, transform 0.3s ease;

        &::after {
          content: "";

          position: absolute;
          bottom: -9px;
          left: 50%;
          transform: translateX(-50%);

          width: 0;
          height: 0;
          display: block;

          border: solid;
          border-width: 10px 10px 0 10px;
          border-color: transparent;
        }
      }
    }
  }
}