:root {
  // Friend column
  .peopleColumn_c2739c {
    background: var(--background-primary);
  }

  // Friend activities
  .nowPlayingColumn_c2739c {
    background: var(--background-secondary-alt);

    .scroller_bf550a {
      border: none;
    }

    .itemCard_f02fcf {
      border: none;

      &.active_ac5d22,
      &.interactive_ac5d22:hover {
        background: var(--background-secondary);
      }

      .section_cd82a7:last-child {
        margin-top: 10px;
      }
      .inset_ac5d22 {
        background: transparent;
      }
      .applicationStreamingPreviewWrapper_cd82a7 {
        background-color: var(--background-secondary);
      }
      .separator_cd82a7 {
        display: none;
      }
    }
  }

  // Friend call buttons
  .bottomControls_dd069c {
    .centerButton_ef18ee {
      border-radius: 7px;
    }
    .colorable_ef18ee.primaryDark_ef18ee {
      background: var(--background-secondary-alt);
    }
    foreignObject {
      mask: none;
    }
  }
  .participantsButton_b83b18 {
    background: var(--background-secondary-alt);
  }

  // Regionnal selector friend call
  .quickSelect__540d0 {
    margin-top: 10px;
  }

  .quickSelectPopout_abbf45.regionSelectPopout_ccb5ca {
    background: var(--background-secondary-alt);
    box-shadow: none;
  }

  // User profile
  .userPanelOuter_c69a7b {

    // Banner
    .bannerSVGWrapper_b32cc2 {
      overflow: visible;
      min-height: 120px !important;

      foreignObject {
        mask: unset;
      }

      .banner_d5fdb1 {
        -webkit-mask-image: linear-gradient(#000000a7, #000000a7);
        height: 120px;
      }

      .pencilContainer_c3e427 {
        display: none;
      }

      &[viewBox="0 0 340 60"] foreignObject {
        transform: translateY(-30px);
      }
      &[viewBox="0 0 340 90"] foreignObject {
        transform: translateY(-15px);
      }
    }

    // Avatar
    .avatarWrapper_f89da9 {
      top: 20px !important;
      left: 16px;

      circle {
        display: none;
      }

      .avatarHint_f89da9 {
        border-radius: 5px;

        foreignObject {
          mask: none;
        }
      }

      .avatarDecorationHint_f89da9 {
        border-radius: 5px !important;
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;

        foreignObject {
          mask: none;
        }
      }
    }

    // Username
    .userPanelOverlayBackground_a2b6ae:nth-child(2) {
      position: static;
      overflow: visible;
      margin: 16px;
      max-height: calc(100vh - 200px);

      .section_d7a21f {
        & > .copiableNameTag_c9ccf6 > .clickTarget__440f0,
        & > div > .userText_c9ccf6 {
          position: absolute;
          top: 25px;
          left: 115px;
          z-index: 1;
          max-width: 200px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          display: block;

          & > span {
            word-break: unset;
            white-space: unset;
          }
        }
      }
    }

    // Pronouns
    .pronouns_c9ccf6 {
      padding-top: 12px;
    }

    // Badges
    .badgelistGroup_ab525a {
      min-height: 0px;
    }

    .badgeList_ab525a {
      position: absolute;
      top: 70px;
      left: 110px;
      height: unset;
      z-index: 1;
      background-color: transparent;
    }

    // Dividers
    .divider_ae36e5 {
      display: none;
    }

    // Body
    .userPanelOverlayBackground_a2b6ae:nth-child(3):not(.profilePanelConnections_b433b4) {
      padding: 12px;

      .scroller_d2b491 {
        padding-right: 12px !important;
      }

      // -- Activities --
      .activity__20c1e {
        padding: 16px;
        margin-top: 25px;
        z-index: 1;

        .text_ec2fa7,
        .textRow_c1d9fd,
        .anchor_af404b,
        .activityName_c1d9fd {
          color: white;
        }

        .buttonColor_e36233 {
          border: none;
          background-color: var(--listening-test);
          box-shadow: 0 4px 15px #00000021;
          color: #fff;
        }

        // Waves are back :D
        .headerTextNormal_c1d9fd::before {
          content: "";
          position: absolute;
          height: 25px;
          z-index: 1;
          width: 284px;
          top: -25px;
          left: 0;
          background: var(--background-secondary);
          background: var(--profile-gradient-primary-color);
          -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="284" height="25" viewBox="0 0 284 25"><path d="M283.999 15.2776C228.798 15.2776 211.243 -0.0317305 140.048 -0.000164877C69.0475 -0.000164877 51.2975 15.2776 8.58307e-06 15.2776V24.9998H284C284 24.9998 283.999 18.9392 283.999 15.2776Z"/></svg>');
          animation: animate2 8s linear infinite;
          animation-delay: 0s;
          opacity: 1;

          @keyframes animate2 {
            0% {
              -webkit-mask-position-x: 284px;
            }
            100% {
              -webkit-mask-position-x: 0;
            }
          }
        }

        // Playing
        &::before {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: -2;
          left: 0;
          top: 0;
          background: #7289da;
          background: var(--playing);
          border-radius: 0 0 10px 10px;
        }

        &::after {
          content: "";
          position: absolute;
          height: 25px;
          z-index: 2;
          width: 284px;
          top: -24px;
          left: 0;
          background: #7289da;
          background: var(--playing);
          -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="284" height="25" viewBox="0 0 284 25"><path d="M283.999 15.2776C228.798 15.2776 211.243 -0.0317305 140.048 -0.000164877C69.0475 -0.000164877 51.2975 15.2776 8.58307e-06 15.2776V24.9998H284C284 24.9998 283.999 18.9392 283.999 15.2776Z"/></svg>');
          animation: animate 6s linear infinite;
          animation-delay: 0s;
          opacity: 1;
        }

        // Spotify
        .timeBarUserPopoutV2_c1d9fd {
          &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
            left: 0;
            top: 0;
            background: #1db954;
            background: var(--listening);
            border-radius: 0 0 10px 10px;
          }

          &::after {
            content: "";
            position: absolute;
            height: 25px;
            width: 284px;
            top: -24px;
            left: 0;
            z-index: 3;
            background: #1db653;
            background: var(--listening);
            -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="284" height="25" viewBox="0 0 284 25"><path d="M283.999 15.2776C228.798 15.2776 211.243 -0.0317305 140.048 -0.000164877C69.0475 -0.000164877 51.2975 15.2776 8.58307e-06 15.2776V24.9998H284C284 24.9998 283.999 18.9392 283.999 15.2776Z"/></svg>');
            animation: animate 6s linear infinite;
            animation-delay: 0s;

            @keyframes animate {
              0% {
                -webkit-mask-position-x: 0;
              }
              100% {
                -webkit-mask-position-x: 284px;
              }
            }
          }

          .barInner_ec2fa7 {
            background-color: white;
          }
        }

        .platformIcon_c1d9fd {
          display: none;
        }
      }
    }
  }
}