@use "../custom" as *;

.services {
  background-color: $green;
  padding: 9.375rem 0 5.375rem;
  margin-top: -9.375rem;
  transition: background-color 250ms ease-in;
  position: relative;

  &::after {
    content: "";
    width: 100%;
    height: 23rem;
    top: 50%;
    transform: translateY(-50%);
    background: no-repeat url("../icons/white-wave-lg.svg");
    background-size: cover;
    background-position: center;
    position: absolute;
    left: 0;
    z-index: 0;
    pointer-events: none;
  }

  &.instagram {
    background-color: $instagram;
  }
  &.tiktok {
    background-color: $tiktok;
  }
  &.twitter {
    background-color: $twitter;
  }
  &.youtube {
    background-color: $youtube;
  }
  &.facebook {
    background-color: $facebook;
  }
  &.spotify {
    background-color: $spotify;
  }
  &.telegram {
    background-color: $telegram;
  }
  &.linkedin {
    background-color: $linkedin;
  }
  &.threads {
    background-color: $threads;
  }
  &.google {
    background-color: $google;
  }
  &.appstore {
    background-color: $appstore;
  }
  &.seo {
    background-color: $seo;
  }
  &.twitch {
    background-color: $twitch;
  }
  &.trovo {
    background-color: $trovo;
  }

  &.dlive {
    background-color: $dlive;
  }
  &.nonolive {
    background-color: $nonolive;
  }
  &.clubhouse {
    background-color: $clubhouse;
  }
  &.tumblr {
    background-color: $tumblr;
  }
  &.soundcloud {
    background-color: $soundcloud;
  }
  &.reddit {
    background-color: $reddit;
  }
  &.pinterest {
    background-color: $pinterest;
  }
  &.likeapp {
    background-color: $likeapp;
  }
  &.kwai {
    background-color: $kwai;
  }
  &.vimeo {
    background-color: $vimeo;
  }
  &.onlyfans {
    background-color: $onlyfans;
  }
  &.quora {
    background-color: $quora;
  }
  &.opensea {
    background-color: $opensea;
  }
  &.dailymotion {
    background-color: $dailymotion;
  }
  &.netflix {
    background-color: $netflix;
  }
  &.discord {
    background-color: $discord;
  }
  &.snapchat {
    background-color: $snapchat;
  }
  &.periscope {
    background-color: $periscope;
  }
  &.tinder {
    background-color: $tinder;
  }
  &.pubg {
    background-color: $pubg;
  }
  &.shazam {
    background-color: $shazam;
  }

  &__content {
    display: flex;
    flex-direction: column;
    gap: 3.0625rem;
  }

  &__headline {
    max-width: 29.3125rem;
    width: 100%;
    margin: 1rem auto;
    text-align: center;
    color: $white;
    font-weight: 700;
    font-family: $roobert;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
  }

  &__description {
    margin: 0 auto;
    text-align: center;
    max-width: 46.875rem;
    width: 100%;
    color: rgba($white, 0.5);
    font-size: 1rem;
    display: block;
  }

  &__wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.5rem;
    position: relative;
    z-index: 1;
    @include media-breakpoint-down(lg) {
      gap: 1rem;
    }
  }

  &__item {
    width: 100%;
    background-color: rgba($white, 0.1);
    border-radius: 0.38rem;
    backdrop-filter: blur(2.5rem);
    padding: 0 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 14.5625rem;
    position: relative;

    &:hover {
      background: $white;

      .services__item-title {
        color: $label-300;
      }
      .services__item-description {
        color: rgba($label-200, 0.5);
      }
    }

    &:hover::after {
      content: "";
      max-width: 8.75rem;
      width: 100%;
      height: 0.1875rem;
      border-radius: 100vh 100vh 0 0;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      z-index: 2;
      position: absolute;
    }

    i {
      color: $white;
      font-size: 2.5625rem;
    }

    svg {
      height: 2.5625rem;

      path {
        fill: $white;
      }
    }

    &-title {
      display: block;
      text-align: center;
      margin: 2.125rem 0 0.75rem;
      color: $white;
      font-family: $roobert;
      font-size: 1rem;
      font-weight: 600;
    }

    &-description {
      font-family: $roobert;
      color: rgba($white, 0.5);
      font-size: 0.88rem;
      text-align: center;
      font-weight: 400;
    }

    &.facebook:hover {
      i {
        color: $facebook;
      }

      &::after {
        background-color: $facebook;
      }
    }

    &.instagram:hover {
      i {
        color: $instagram;
      }

      &::after {
        background-color: $instagram;
      }
    }

    &.tiktok:hover {
      i {
        color: $tiktok;
      }

      &::after {
        background-color: $tiktok;
      }
    }

    &.twitter:hover {
      i {
        color: $twitter;
      }

      &::after {
        background-color: $twitter;
      }
    }

    &.youtube:hover {
      i {
        color: $youtube;
      }

      &::after {
        background-color: $youtube;
      }
    }

    &.spotify:hover {
      i {
        color: $spotify;
      }

      &::after {
        background-color: $spotify;
      }
    }

    &.telegram:hover {
      i {
        color: $telegram;
      }

      &::after {
        background-color: $telegram;
      }
    }

    &.linkedin:hover {
      i {
        color: $linkedin;
      }

      &::after {
        background-color: $linkedin;
      }
    }

    &.threads:hover {
      i {
        color: $threads;
      }

      &::after {
        background-color: $threads;
      }
    }

    &.google:hover {
      i {
        color: $google;
      }

      &::after {
        background-color: $google;
      }
    }

    &.appstore:hover {
      i {
        color: $appstore;
      }

      &::after {
        background-color: $appstore;
      }
    }

    &.seo:hover {
      i {
        color: $seo;
      }

      &::after {
        background-color: $seo;
      }
    }

    &.twitch:hover {
      i {
        color: $twitch;
      }

      &::after {
        background-color: $twitch;
      }
    }

    &.dlive:hover {
      i {
        color: $dlive;

        &.fa-dlive {
          background: url("../icons/dlive-hover.svg");
        }
      }

      svg {
        path {
          fill: $dlive;
        }
      }

      &::after {
        background-color: $dlive;
      }
    }

    &.nonolive:hover {
      i {
        color: $nonolive;

        &.fa-nonolive {
          background: url("../icons/nonolive-hover.svg");
        }
      }

      svg {
        path {
          fill: $nonolive;
        }
      }

      &::after {
        background-color: $nonolive;
      }
    }

    &.clubhouse:hover {
      i {
        color: $clubhouse;

        &.fa-clubhouse {
          background: url("../icons/clubhouse-hover.svg");
        }
      }

      svg {
        path {
          fill: $clubhouse;
        }
      }

      &::after {
        background-color: $clubhouse;
      }
    }

    &.tumblr:hover {
      i {
        color: $tumblr;
      }

      &::after {
        background-color: $tumblr;
      }
    }

    &.soundcloud:hover {
      i {
        color: $soundcloud;
      }

      &::after {
        background-color: $soundcloud;
      }
    }

    &.reddit:hover {
      i {
        color: $reddit;
      }

      &::after {
        background-color: $reddit;
      }
    }

    &.pinterest:hover {
      i {
        color: $pinterest;
      }

      &::after {
        background-color: $pinterest;
      }
    }

    &.likeapp:hover {
      i {
        color: $likeapp;

        &.fa-likeapp {
          background: url("../icons/likeapp-hover.svg");
        }
      }

      svg {
        path {
          fill: $likeapp;
        }
      }

      &::after {
        background-color: $likeapp;
      }
    }

    &.kwai:hover {
      i {
        color: $kwai;

        &.fa-kwai {
          background: url("../icons/kwai-hover.svg");
        }
      }

      svg {
        path {
          fill: $kwai;
        }
      }

      &::after {
        background-color: $kwai;
      }
    }

    &.trovo:hover {
      i {
        color: $trovo;

        &.fa-trovo {
          background: url("../icons/trovo-hover.svg");
        }
      }

      svg {
        path {
          fill: $trovo;
        }
      }

      &::after {
        background-color: $trovo;
      }
    }

    &.vimeo:hover {
      i {
        color: $vimeo;
      }

      &::after {
        background-color: $vimeo;
      }
    }

    &.onlyfans:hover {
      i {
        color: $onlyfans;

        &.fa-onlyfans {
          background: url("../icons/onlyfans-hover.svg");
        }
      }

      svg {
        path {
          fill: $onlyfans;
        }
      }

      &::after {
        background-color: $onlyfans;
      }
    }

    &.quora:hover {
      i {
        color: $quora;
      }

      &::after {
        background-color: $quora;
      }
    }

    &.opensea:hover {
      i {
        color: $opensea;

        &.fa-opensea {
          background: url("../icons/opensea-hover.svg");
        }
      }

      svg {
        path {
          fill: $opensea;
        }
      }

      &::after {
        background-color: $opensea;
      }
    }

    &.dailymotion:hover {
      i {
        color: $dailymotion;

        &.fa-dailymotion {
          background: url("../icons/dailymotion-hover.svg");
        }
      }

      svg {
        path {
          fill: $dailymotion;
        }
      }

      &::after {
        background-color: $dailymotion;
      }
    }

    &.netflix:hover {
      i {
        color: $netflix;

        &.fa-netflix {
          background: url("../icons/netflix-hover.svg");
        }
      }

      svg {
        path {
          fill: $netflix;
        }
      }

      &::after {
        background-color: $netflix;
      }
    }

    &.discord:hover {
      i {
        color: $discord;

        &.fa-discord {
          background: url("../icons/discord-hover.svg");
        }
      }

      svg {
        path {
          fill: $discord;
        }
      }

      &::after {
        background-color: $discord;
      }
    }

    &.snapchat:hover {
      i {
        color: $snapchat;
      }

      &::after {
        background-color: $snapchat;
      }
    }

    &.periscope:hover {
      i {
        color: $periscope;
      }

      &::after {
        background-color: $periscope;
      }
    }

    &.tinder:hover {
      i {
        color: $tinder;

        &.fa-tinder {
          background: url("../icons/tinder-hover.svg");
        }
      }

      svg {
        path {
          fill: $tinder;
        }
      }

      &::after {
        background-color: $tinder;
      }
    }

    &.pubg:hover {
      i {
        color: $pubg;

        &.fa-pubg {
          background: url("../icons/pubg-hover.svg");
        }
      }

      svg {
        path {
          fill: $pubg;
        }
      }

      &::after {
        background-color: $pubg;
      }
    }

    &.shazam:hover {
      i {
        color: $shazam;

        &.fa-shazam {
          background: url("../icons/shazam-hover.svg");
        }
      }

      svg {
        path {
          fill: $shazam;
        }
      }

      &::after {
        background-color: $shazam;
      }
    }
  }
}