@use "../custom" as *;

.packages {
  &__wrapper {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.875rem, 1fr));
    gap: 1.5rem;
  }

  &__item {
    display: flex;
    flex-direction: column;
    gap: 0.4063rem;

    &-head {
      background-color: $instagram;
      position: relative;
      border-radius: 0.5rem;
      padding-left: 0.9375rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 4.625rem;

      &::after {
        content: "";
        position: absolute;
        display: block;
        width: 0.1875rem;
        left: 0;
        top: 50%;
        height: calc(100% - 2rem);
        transform: translateY(-50%);
        border-radius: 0 100vh 100vh 0;
        background-color: $white;
        z-index: 3;
      }

      &-icon {
        width: 3.4375rem;
        height: 2.625rem;
        border-radius: 0.375rem 0 0 0.375rem;
        background-color: rgba($white, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;

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

    &-title {
      color: $white;
      font-family: $roobert;
      font-weight: 700;
      display: block;
      margin: 0;
      font-size: 1rem;
      line-height: 1;
    }

    &-subtitle {
      color: $white;
      font-family: $roobert;
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1;
    }

    &-content {
      background-color: $white;
      border-radius: 0.375rem;
    }

    &-list {
      margin: 0;
      padding: 0;
      height: 20rem;
      overflow: auto;

      &::-webkit-scrollbar {
        width: 0.5rem;
        height: 0.5rem;
      }
      &::-webkit-scrollbar-button {
        width: 1.75rem;
        height: 1.75rem;
      }
      &::-webkit-scrollbar-thumb {
        background: #c9d6e2;
        border-radius: 100vh;
      }
      &::-webkit-scrollbar-track {
        background: #e6f0fa;
        border-radius: 100vh;
      }

      &::-webkit-scrollbar-corner {
        background: transparent;
      }

      li {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1.25rem 1.5rem;
        border-bottom: 2px solid #ecf0ff;

        &:first-child {
          span {
            font-weight: 700;
          }
        }

        i {
          color: $instagram;
          font-size: 1.3125rem;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        span {
          font-family: $roobert;
          font-size: 0.875rem;
          font-weight: 400;
          color: $label;
        }
      }
    }

    &-footer {
      padding: 1.1875rem 1.5rem;

      .btn-success {
        width: 100%;
        margin-top: 1.1875rem;
        text-align: center;
        color: $white;
        font-size: 0.875rem;
        font-weight: 500;
        font-family: $inter;
        padding: 0;
        height: 3.3125rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    &-discount {
      font-weight: 400 !important;
      font-size: 0.75rem !important;
      color: rgba(#183b56, 0.6) !important;
      text-decoration:line-through !important;
    }

    &-price {
      display: flex;
      align-items: center !important;
      gap: 0.375rem;


      &-text {
        height: 2.1875rem;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
      }

      span {
        display: block;
        color: $label;
        font-family: $roobert;
        font-size: 0.875rem;
        font-weight: 700;
        text-align: start;
      }

      &-icon {
        min-width: 2.125rem;
        width: 2.125rem;
        height: 2.125rem;
        border-radius: 0.9375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba($green, 0.15);

        img {
          min-width: 1rem;
          width: 1rem;
          height: 0.875rem;
          object-fit: contain;
        }
      }
    }

    &.instagram {
      .packages__item-head {
        background-color: $instagram;
      }

      .packages__item-list li i {
        color: $instagram;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($instagram, 0.25);

        &:hover {
          background-color: rgba($instagram, 0.4);
        }

        svg {
          path {
            fill: $instagram;
          }
        }

        &.active {
          background-color: $instagram;
        }
      }
    }

    &.tiktok {
      .packages__item-head {
        background-color: $tiktok;
      }

      .packages__item-list li i {
        color: $tiktok;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($tiktok, 0.25);

        &:hover {
          background-color: rgba($tiktok, 0.4);
        }

        svg {
          path {
            fill: $tiktok;
          }
        }

        &.active {
          background-color: $tiktok;
        }
      }
    }

    &.twitter {
      .packages__item-head {
        background-color: $twitter;
      }

      .packages__item-list li i {
        color: $twitter;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($twitter, 0.25);

        &:hover {
          background-color: rgba($twitter, 0.4);
        }

        svg {
          path {
            fill: $twitter;
          }
        }

        &.active {
          background-color: $twitter;
        }
      }
    }

    &.youtube {
      .packages__item-head {
        background-color: $youtube;
      }

      .packages__item-list li i {
        color: $youtube;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($youtube, 0.25);

        &:hover {
          background-color: rgba($youtube, 0.4);
        }

        svg {
          path {
            fill: $youtube;
          }
        }

        &.active {
          background-color: $youtube;
        }
      }
    }

    &.facebook {
      .packages__item-head {
        background-color: $facebook;
      }

      .packages__item-list li i {
        color: $facebook;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($facebook, 0.25);

        &:hover {
          background-color: rgba($facebook, 0.4);
        }

        svg {
          path {
            fill: $facebook;
          }
        }

        &.active {
          background-color: $facebook;
        }
      }
    }

    &.spotify {
      .packages__item-head {
        background-color: $spotify;
      }

      .packages__item-list li i {
        color: $spotify;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($spotify, 0.25);

        &:hover {
          background-color: rgba($spotify, 0.4);
        }

        svg {
          path {
            fill: $spotify;
          }
        }

        &.active {
          background-color: $spotify;
        }
      }
    }

    &.telegram {
      .packages__item-head {
        background-color: $telegram;
      }

      .packages__item-list li i {
        color: $telegram;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($telegram, 0.25);

        &:hover {
          background-color: rgba($telegram, 0.4);
        }

        svg {
          path {
            fill: $telegram;
          }
        }

        &.active {
          background-color: $telegram;
        }
      }
    }

    &.linkedin {
      .packages__item-head {
        background-color: $linkedin;
      }

      .packages__item-list li i {
        color: $linkedin;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($linkedin, 0.25);

        &:hover {
          background-color: rgba($linkedin, 0.4);
        }

        svg {
          path {
            fill: $linkedin;
          }
        }

        &.active {
          background-color: $linkedin;
        }
      }
    }

    &.threads {
      .packages__item-head {
        background-color: $threads;
      }

      .packages__item-list li i {
        color: $threads;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($threads, 0.25);

        &:hover {
          background-color: rgba($threads, 0.4);
        }

        svg {
          path {
            fill: $threads;
          }
        }

        &.active {
          background-color: $threads;
        }
      }
    }

    &.google {
      .packages__item-head {
        background-color: $google;
      }

      .packages__item-list li i {
        color: $google;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($google, 0.25);

        &:hover {
          background-color: rgba($google, 0.4);
        }

        svg {
          path {
            fill: $google;
          }
        }

        &.active {
          background-color: $google;
        }
      }
    }

    &.appstore {
      .packages__item-head {
        background-color: $appstore;
      }

      .packages__item-list li i {
        color: $appstore;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($appstore, 0.25);

        &:hover {
          background-color: rgba($appstore, 0.4);
        }

        svg {
          path {
            fill: $appstore;
          }
        }

        &.active {
          background-color: $appstore;
        }
      }
    }

    &.seo {
      .packages__item-head {
        background-color: $seo;
      }

      .packages__item-list li i {
        color: $seo;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($seo, 0.25);

        &:hover {
          background-color: rgba($seo, 0.4);
        }

        svg {
          path {
            fill: $seo;
          }
        }

        &.active {
          background-color: $seo;
        }
      }
    }

    &.twitch {
      .packages__item-head {
        background-color: $twitch;
      }

      .packages__item-list li i {
        color: $twitch;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($twitch, 0.25);

        &:hover {
          background-color: rgba($twitch, 0.4);
        }

        svg {
          path {
            fill: $twitch;
          }
        }

        &.active {
          background-color: $twitch;
        }
      }
    }

    &.trovo {
      .packages__item-head {
        background-color: $trovo;
      }

      .packages__item-list li i {
        color: $trovo;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($trovo, 0.25);

        &:hover {
          background-color: rgba($trovo, 0.4);
        }

        svg {
          path {
            fill: $trovo;
          }
        }

        &.active {
          background-color: $trovo;
        }
      }
    }

    &.dlive {
      .packages__item-head {
        background-color: $dlive;
      }

      .packages__item-list li i {
        color: $dlive;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($dlive, 0.25);

        &:hover {
          background-color: rgba($dlive, 0.4);
        }

        svg {
          path {
            fill: $dlive;
          }
        }

        &.active {
          background-color: $dlive;
        }
      }
    }

    &.nonolive {
      .packages__item-head {
        background-color: $nonolive;
      }

      .packages__item-list li i {
        color: $nonolive;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($nonolive, 0.25);

        &:hover {
          background-color: rgba($nonolive, 0.4);
        }

        svg {
          path {
            fill: $nonolive;
          }
        }

        &.active {
          background-color: $nonolive;
        }
      }
    }

    &.clubhouse {
      .packages__item-head {
        background-color: $clubhouse;
      }

      .packages__item-list li i {
        color: $clubhouse;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($clubhouse, 0.25);

        &:hover {
          background-color: rgba($clubhouse, 0.4);
        }

        svg {
          path {
            fill: $clubhouse;
          }
        }

        &.active {
          background-color: $clubhouse;
        }
      }
    }

    &.tumblr {
      .packages__item-head {
        background-color: $tumblr;
      }

      .packages__item-list li i {
        color: $tumblr;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($tumblr, 0.25);

        &:hover {
          background-color: rgba($tumblr, 0.4);
        }

        svg {
          path {
            fill: $tumblr;
          }
        }

        &.active {
          background-color: $tumblr;
        }
      }
    }

    &.soundcloud {
      .packages__item-head {
        background-color: $soundcloud;
      }

      .packages__item-list li i {
        color: $soundcloud;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($soundcloud, 0.25);

        &:hover {
          background-color: rgba($soundcloud, 0.4);
        }

        svg {
          path {
            fill: $soundcloud;
          }
        }

        &.active {
          background-color: $soundcloud;
        }
      }
    }

    &.reddit {
      .packages__item-head {
        background-color: $reddit;
      }

      .packages__item-list li i {
        color: $reddit;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($reddit, 0.25);

        &:hover {
          background-color: rgba($reddit, 0.4);
        }

        svg {
          path {
            fill: $reddit;
          }
        }

        &.active {
          background-color: $reddit;
        }
      }
    }

    &.pinterest {
      .packages__item-head {
        background-color: $pinterest;
      }

      .packages__item-list li i {
        color: $pinterest;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($pinterest, 0.25);

        &:hover {
          background-color: rgba($pinterest, 0.4);
        }

        svg {
          path {
            fill: $pinterest;
          }
        }

        &.active {
          background-color: $pinterest;
        }
      }
    }

    &.likeapp {
      .packages__item-head {
        background-color: $likeapp;
      }

      .packages__item-list li i {
        color: $likeapp;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($likeapp, 0.25);

        &:hover {
          background-color: rgba($likeapp, 0.4);
        }

        svg {
          path {
            fill: $likeapp;
          }
        }

        &.active {
          background-color: $likeapp;
        }
      }
    }

    &.kwai {
      .packages__item-head {
        background-color: $kwai;
      }

      .packages__item-list li i {
        color: $kwai;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($kwai, 0.25);

        &:hover {
          background-color: rgba($kwai, 0.4);
        }

        svg {
          path {
            fill: $kwai;
          }
        }

        &.active {
          background-color: $kwai;
        }
      }
    }

    &.vimeo {
      .packages__item-head {
        background-color: $vimeo;
      }

      .packages__item-list li i {
        color: $vimeo;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($vimeo, 0.25);

        &:hover {
          background-color: rgba($vimeo, 0.4);
        }

        svg {
          path {
            fill: $vimeo;
          }
        }

        &.active {
          background-color: $vimeo;
        }
      }
    }

    &.onlyfans {
      .packages__item-head {
        background-color: $onlyfans;
      }

      .packages__item-list li i {
        color: $onlyfans;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($onlyfans, 0.25);

        &:hover {
          background-color: rgba($onlyfans, 0.4);
        }

        svg {
          path {
            fill: $onlyfans;
          }
        }

        &.active {
          background-color: $onlyfans;
        }
      }
    }

    &.quora {
      .packages__item-head {
        background-color: $quora;
      }

      .packages__item-list li i {
        color: $quora;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($quora, 0.25);

        &:hover {
          background-color: rgba($quora, 0.4);
        }

        svg {
          path {
            fill: $quora;
          }
        }

        &.active {
          background-color: $quora;
        }
      }
    }

    &.opensea {
      .packages__item-head {
        background-color: $opensea;
      }

      .packages__item-list li i {
        color: $opensea;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($opensea, 0.25);

        &:hover {
          background-color: rgba($opensea, 0.4);
        }

        svg {
          path {
            fill: $opensea;
          }
        }

        &.active {
          background-color: $opensea;
        }
      }
    }

    &.dailymotion {
      .packages__item-head {
        background-color: $dailymotion;
      }

      .packages__item-list li i {
        color: $dailymotion;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($dailymotion, 0.25);

        &:hover {
          background-color: rgba($dailymotion, 0.4);
        }

        svg {
          path {
            fill: $dailymotion;
          }
        }

        &.active {
          background-color: $dailymotion;
        }
      }
    }

    &.netflix {
      .packages__item-head {
        background-color: $netflix;
      }

      .packages__item-list li i {
        color: $netflix;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($netflix, 0.25);

        &:hover {
          background-color: rgba($netflix, 0.4);
        }

        svg {
          path {
            fill: $netflix;
          }
        }

        &.active {
          background-color: $netflix;
        }
      }
    }

    &.discord {
      .packages__item-head {
        background-color: $discord;
      }

      .packages__item-list li i {
        color: $discord;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($discord, 0.25);

        &:hover {
          background-color: rgba($discord, 0.4);
        }

        svg {
          path {
            fill: $discord;
          }
        }

        &.active {
          background-color: $discord;
        }
      }
    }

    &.snapchat {
      .packages__item-head {
        background-color: $snapchat;
      }

      .packages__item-list li i {
        color: $snapchat;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($snapchat, 0.25);

        &:hover {
          background-color: rgba($snapchat, 0.4);
        }

        svg {
          path {
            fill: $snapchat;
          }
        }

        &.active {
          background-color: $snapchat;
        }
      }
    }

    &.periscope {
      .packages__item-head {
        background-color: $periscope;
      }

      .packages__item-list li i {
        color: $periscope;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($periscope, 0.25);

        &:hover {
          background-color: rgba($periscope, 0.4);
        }

        svg {
          path {
            fill: $periscope;
          }
        }

        &.active {
          background-color: $periscope;
        }
      }
    }

    &.tinder {
      .packages__item-head {
        background-color: $tinder;
      }

      .packages__item-list li i {
        color: $tinder;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($tinder, 0.25);

        &:hover {
          background-color: rgba($tinder, 0.4);
        }

        svg {
          path {
            fill: $tinder;
          }
        }

        &.active {
          background-color: $tinder;
        }
      }
    }

    &.pubg {
      .packages__item-head {
        background-color: $pubg;
      }

      .packages__item-list li i {
        color: $pubg;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($pubg, 0.25);

        &:hover {
          background-color: rgba($pubg, 0.4);
        }

        svg {
          path {
            fill: $pubg;
          }
        }

        &.active {
          background-color: $pubg;
        }
      }
    }

    &.shazam {
      .packages__item-head {
        background-color: $shazam;
      }

      .packages__item-list li i {
        color: $shazam;
      }

      .packages__item-footer .btn-favorite {
        background-color: rgba($shazam, 0.25);

        &:hover {
          background-color: rgba($shazam, 0.4);
        }

        svg {
          path {
            fill: $shazam;
          }
        }

        &.active {
          background-color: $shazam;
        }
      }
    }
  }
}