@use "../custom" as *;

.category {
  position: relative;
  z-index: 3;
  margin-top: -80px;
  &__wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
    gap: 1.5rem;

    @include media-breakpoint-down(sm) {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
    }
  }

  &__item {
    border-radius: 0.375rem;
    background-color: $white;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 5.625rem;
    overflow: hidden;
    padding-right: 1rem;
    position: relative;

    &-media {
      min-width: 4.375rem;
      width: 4.375rem;
      background-color: $twitch;
      height: 100%;
      display: flex;
      align-items: center;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        background-color: $white;
        border-radius: 0.375rem 0 0 0.375rem;
        height: 2.625rem;
        width: 0.1875rem;
        transform: translateY(-50%);
      }

      div {
        width: 3.4375rem;
        height: 2.5rem;
        border-radius: 0 0.375rem 0.375rem 0;
        background-color: rgba($black, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;

        i,
        img {
          color: $white;
          font-size: 1.5625rem;
          width: 1.5625rem;
          height: 1.5625rem;
          object-fit: contain;
        }
      }
    }

    &-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: 1rem;
    }

    &-icon {
      font-size: 1.9375rem;
      color: $twitch;
    }

    &-name {
      font-weight: 500;
      font-size: 1rem;
      color: #183b56;
      font-family: $inter;
      display: block;
    }

    &-subtitle {
      font-weight: 400;
      font-size: 0.88rem;
      color: rgba(161, 172, 208, 0.7);
      font-family: $inter;
    }

    &-link {
      font-weight: 500;
      font-size: 0.75rem;
      text-align: center;
      color: #9752ff;
      font-family: $inter;
      padding: 8px 23px;
      border-radius: 100vh;

      @include media-breakpoint-down(sm) {
        display: none;
      }
    }

    &::after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      background-color: $twitch;
      border-radius: 0.375rem 0 0 0.375rem;
      height: 3.4375rem;
      width: 0.1875rem;
      transform: translateY(-50%);
    }

    &.instagram {
      &::after {
        background-color: $instagram;
      }
      .category__item-media {
        background-color: $instagram;
      }

      .category__item-icon i {
        color: $instagram;
      }

      .category__item-link {
        color: $instagram;
        background-color: rgba($instagram, 0.15);
      }
    }

    &.tiktok {
      &::after {
        background-color: $tiktok;
      }
      .category__item-media {
        background-color: $tiktok;
      }

      .category__item-icon i {
        color: $tiktok;
      }

      .category__item-link {
        color: $tiktok;
        background-color: rgba($tiktok, 0.15);
      }
    }

    &.twitter {
      &::after {
        background-color: $twitter;
      }
      .category__item-media {
        background-color: $twitter;
      }

      .category__item-icon i {
        color: $twitter;
      }

      .category__item-link {
        color: $twitter;
        background-color: rgba($twitter, 0.15);
      }
    }

    &.youtube {
      &::after {
        background-color: $youtube;
      }
      .category__item-media {
        background-color: $youtube;
      }

      .category__item-icon i {
        color: $youtube;
      }

      .category__item-link {
        color: $youtube;
        background-color: rgba($youtube, 0.15);
      }
    }

    &.facebook {
      &::after {
        background-color: $facebook;
      }
      .category__item-media {
        background-color: $facebook;
      }

      .category__item-icon i {
        color: $facebook;
      }

      .category__item-link {
        color: $facebook;
        background-color: rgba($facebook, 0.15);
      }
    }
    &.spotify {
      &::after {
        background-color: $spotify;
      }
      .category__item-media {
        background-color: $spotify;
      }

      .category__item-icon i {
        color: $spotify;
      }

      .category__item-link {
        color: $spotify;
        background-color: rgba($spotify, 0.15);
      }
    }
    &.telegram {
      &::after {
        background-color: $telegram;
      }
      .category__item-media {
        background-color: $telegram;
      }

      .category__item-icon i {
        color: $telegram;
      }

      .category__item-link {
        color: $telegram;
        background-color: rgba($telegram, 0.15);
      }
    }
    &.linkedin {
      &::after {
        background-color: $linkedin;
      }
      .category__item-media {
        background-color: $linkedin;
      }

      .category__item-icon i {
        color: $linkedin;
      }

      .category__item-link {
        color: $linkedin;
        background-color: rgba($linkedin, 0.15);
      }
    }
    &.threads {
      &::after {
        background-color: $threads;
      }
      .category__item-media {
        background-color: $threads;
      }

      .category__item-icon i {
        color: $threads;
      }

      .category__item-link {
        color: $threads;
        background-color: rgba($threads, 0.15);
      }
    }
    &.google {
      &::after {
        background-color: $google;
      }
      .category__item-media {
        background-color: $google;
      }

      .category__item-icon i {
        color: $google;
      }

      .category__item-link {
        color: $google;
        background-color: rgba($google, 0.15);
      }
    }
    &.appstore {
      &::after {
        background-color: $appstore;
      }
      .category__item-media {
        background-color: $appstore;
      }

      .category__item-icon i {
        color: $appstore;
      }

      .category__item-link {
        color: $appstore;
        background-color: rgba($appstore, 0.15);
      }
    }
    &.seo {
      &::after {
        background-color: $seo;
      }
      .category__item-media {
        background-color: $seo;
      }

      .category__item-icon i {
        color: $seo;
      }

      .category__item-link {
        color: $seo;
        background-color: rgba($seo, 0.15);
      }
    }
    &.twitch {
      &::after {
        background-color: $twitch;
      }
      .category__item-media {
        background-color: $twitch;
      }

      .category__item-icon i {
        color: $twitch;
      }

      .category__item-link {
        color: $twitch;
        background-color: rgba($twitch, 0.15);
      }
    }
    &.trovo {
      &::after {
        background-color: $trovo;
      }
      .category__item-media {
        background-color: $trovo;
      }

      .category__item-icon i {
        color: $trovo;
      }

      .category__item-link {
        color: $trovo;
        background-color: rgba($trovo, 0.15);
      }
    }

    &.dlive {
      &::after {
        background-color: $dlive;
      }
      .category__item-media {
        background-color: $dlive;
      }

      .category__item-icon i {
        color: $dlive;
      }

      .category__item-link {
        color: $dlive;
        background-color: rgba($dlive, 0.15);
      }
    }
    &.nonolive {
      &::after {
        background-color: $nonolive;
      }
      .category__item-media {
        background-color: $nonolive;
      }

      .category__item-icon i {
        color: $nonolive;
      }

      .category__item-link {
        color: $nonolive;
        background-color: rgba($nonolive, 0.15);
      }
    }
    &.clubhouse {
      &::after {
        background-color: $clubhouse;
      }
      .category__item-media {
        background-color: $clubhouse;
      }

      .category__item-icon i {
        color: $clubhouse;
      }

      .category__item-link {
        color: $clubhouse;
        background-color: rgba($clubhouse, 0.15);
      }
    }
    &.tumblr {
      &::after {
        background-color: $tumblr;
      }
      .category__item-media {
        background-color: $tumblr;
      }

      .category__item-icon i {
        color: $tumblr;
      }

      .category__item-link {
        color: $tumblr;
        background-color: rgba($tumblr, 0.15);
      }
    }
    &.soundcloud {
      &::after {
        background-color: $soundcloud;
      }
      .category__item-media {
        background-color: $soundcloud;
      }

      .category__item-icon i {
        color: $soundcloud;
      }

      .category__item-link {
        color: $soundcloud;
        background-color: rgba($soundcloud, 0.15);
      }
    }
    &.reddit {
      &::after {
        background-color: $reddit;
      }
      .category__item-media {
        background-color: $reddit;
      }

      .category__item-icon i {
        color: $reddit;
      }

      .category__item-link {
        color: $reddit;
        background-color: rgba($reddit, 0.15);
      }
    }
    &.pinterest {
      &::after {
        background-color: $pinterest;
      }
      .category__item-media {
        background-color: $pinterest;
      }

      .category__item-icon i {
        color: $pinterest;
      }

      .category__item-link {
        color: $pinterest;
        background-color: rgba($pinterest, 0.15);
      }
    }
    &.likeapp {
      &::after {
        background-color: $likeapp;
      }
      .category__item-media {
        background-color: $likeapp;
      }

      .category__item-icon i {
        color: $likeapp;
      }

      .category__item-link {
        color: $likeapp;
        background-color: rgba($likeapp, 0.15);
      }
    }
    &.kwai {
      &::after {
        background-color: $kwai;
      }
      .category__item-media {
        background-color: $kwai;
      }

      .category__item-icon i {
        color: $kwai;
      }

      .category__item-link {
        color: $kwai;
        background-color: rgba($kwai, 0.15);
      }
    }
    &.vimeo {
      &::after {
        background-color: $vimeo;
      }
      .category__item-media {
        background-color: $vimeo;
      }

      .category__item-icon i {
        color: $vimeo;
      }

      .category__item-link {
        color: $vimeo;
        background-color: rgba($vimeo, 0.15);
      }
    }
    &.onlyfans {
      &::after {
        background-color: $onlyfans;
      }
      .category__item-media {
        background-color: $onlyfans;
      }

      .category__item-icon i {
        color: $onlyfans;
      }

      .category__item-link {
        color: $onlyfans;
        background-color: rgba($onlyfans, 0.15);
      }
    }
    &.quora {
      &::after {
        background-color: $quora;
      }
      .category__item-media {
        background-color: $quora;
      }

      .category__item-icon i {
        color: $quora;
      }

      .category__item-link {
        color: $quora;
        background-color: rgba($quora, 0.15);
      }
    }
    &.opensea {
      &::after {
        background-color: $opensea;
      }
      .category__item-media {
        background-color: $opensea;
      }

      .category__item-icon i {
        color: $opensea;
      }

      .category__item-link {
        color: $opensea;
        background-color: rgba($opensea, 0.15);
      }
    }
    &.dailymotion {
      &::after {
        background-color: $dailymotion;
      }
      .category__item-media {
        background-color: $dailymotion;
      }

      .category__item-icon i {
        color: $dailymotion;
      }

      .category__item-link {
        color: $dailymotion;
        background-color: rgba($dailymotion, 0.15);
      }
    }
    &.netflix {
      &::after {
        background-color: $netflix;
      }
      .category__item-media {
        background-color: $netflix;
      }

      .category__item-icon i {
        color: $netflix;
      }

      .category__item-link {
        color: $netflix;
        background-color: rgba($netflix, 0.15);
      }
    }
    &.discord {
      &::after {
        background-color: $discord;
      }
      .category__item-media {
        background-color: $discord;
      }

      .category__item-icon i {
        color: $discord;
      }

      .category__item-link {
        color: $discord;
        background-color: rgba($discord, 0.15);
      }
    }
    &.snapchat {
      &::after {
        background-color: $snapchat;
      }
      .category__item-media {
        background-color: $snapchat;
      }

      .category__item-icon i {
        color: $snapchat;
      }

      .category__item-link {
        color: $snapchat;
        background-color: rgba($snapchat, 0.15);
      }
    }
    &.periscope {
      &::after {
        background-color: $periscope;
      }
      .category__item-media {
        background-color: $periscope;
      }

      .category__item-icon i {
        color: $periscope;
      }

      .category__item-link {
        color: $periscope;
        background-color: rgba($periscope, 0.15);
      }
    }
    &.tinder {
      &::after {
        background-color: $tinder;
      }
      .category__item-media {
        background-color: $tinder;
      }

      .category__item-icon i {
        color: $tinder;
      }

      .category__item-link {
        color: $tinder;
        background-color: rgba($tinder, 0.15);
      }
    }
    &.pubg {
      &::after {
        background-color: $pubg;
      }
      .category__item-media {
        background-color: $pubg;
      }

      .category__item-icon i {
        color: $pubg;
      }

      .category__item-link {
        color: $pubg;
        background-color: rgba($pubg, 0.15);
      }
    }
    &.shazam {
      &::after {
        background-color: $shazam;
      }
      .category__item-media {
        background-color: $shazam;
      }

      .category__item-icon i {
        color: $shazam;
      }

      .category__item-link {
        color: $shazam;
        background-color: rgba($shazam, 0.15);
      }
    }
  }
}