@use "sass:string";

:root {
  .bannerSVGWrapper_b32cc2 mask {
    display: none;
  }

  // -- Member popout --
  .userPopoutOuter_c69a7b {
    max-height: unset !important;

    .userPopoutInner_c69a7b {
      max-height: unset !important;
    }

    .header_b8cc6d {
      min-height: 120px !important;
    }

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

      foreignObject {
        mask: unset;
      }

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

      .pencilContainer_c3e427 {
        display: none;
      }

      &[viewBox="0 0 300 105"] foreignObject {
        transform: translateY(-0px);
      }
    }

    // Avatar
    .avatar_f94206 {
      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;
        }
      }

      .overlay_f94206:after {
        border-radius: var(--avatar-radius);
      }
    }

    // goofy status thing
    .statusBubble_d22603 {
      background-color: var(--background-tertiary);
    }

    // Body
    .body_b8cc6d {
      position: static;
      overflow: visible;


      // Username
      .container_c32acf {
        position: absolute;
        top: 20px;
        left: 115px;
        z-index: 1;
        max-width: 180px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        pointer-events: none;
      }

      // -- Activities --
      .activity_b8cc6d {
        padding: 16px;
        margin-top: 25px;
        z-index: 1;
        background: none !important;

        [style="color: var(--text-normal);"] {
          color: white !important;
        }

        .button_dd4f85 {
          border: none;
          background-color: rgba(255, 255, 255, 0.2);
          box-shadow: 0 4px 15px #00000021;
          color: #fff;
          border-radius: 8px;
        }

        // Waves are back :D
        .headerTextNormal_c1d9fd::before {
          content: "";
          position: absolute;
          height: 25px;
          z-index: 1;
          width: 276px;
          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="276" height="25" viewBox="0 0 276 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.9998H276C276 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: 276px;
            }
            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: 276px;
          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="276" height="25" viewBox="0 0 276 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.9998H276C276 24.9998 283.999 18.9392 283.999 15.2776Z"/></svg>');
          animation: animate 6s linear infinite;
          animation-delay: 0s;
          opacity: 1;
        }

        // Spotify
        .bar_b5cd55 {
          &::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: 276px;
            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="276" height="25" viewBox="0 0 276 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.9998H276C276 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: 276px;
              }
            }
          }

          .barInner_ec2fa7 {
            background-color: white;
          }
        }

        .platformIcon_c1d9fd {
          display: none;
        }
      }

      // Roles
      .role_f9575e {
        position: relative;
        overflow: hidden;
        border: none;
        z-index: 1;

        &:not(.addButton_e4010c) {
          pointer-events: none;
        }

        .roleRemoveButton_f9575e {
          position: static;

          .roleCircle_a26d7b {
            width: var(--role-circle) !important;
            height: var(--role-circle) !important;
            pointer-events: auto;

            &::before {
              position: absolute;
              content: "";
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: inherit;
              opacity: 0.3;
              z-index: -1;
              pointer-events: none;
              transition: background 200ms;
            }

            &:hover {
              background: #fd5959 !important;
            }
          }

          .roleRemoveIcon_e4010c {
            display: none;
          }
        }
      }
    }
  }

  // Roles selector
  .container_ac201b {
    position: relative;
    z-index: 1005;
    border: none;
    padding: 0;
    background-color: #191f2e;

    .container_c18ec9 {
      border-radius: 5px 5px 0 0;
    }

    .list_eef3ef {
      margin: 0;
      padding: 0;

      .item_eef3ef {
        margin: 5px;
        position: relative;
        overflow: hidden;
        border-radius: 0;

        .popoutRoleCircle_f50ea3 {
          width: 0;
          border: none;
          margin: 0;

          &::before {
            position: absolute;
            border-radius: 5px;
            content: "";
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: inherit;
            opacity: 0.2;
            z-index: -1;
          }
        }
      }
    }
  }

  // -- User modal --
  .root_b9fccc > .userProfileOuter_c69a7b {
    width: 700px;

    header {
      position: absolute;
      width: 100%;

      .mask_d5fdb1 > mask {
        display: none;
      }

      .headerInner_b9fccc {
        width: calc(100% - 8px);
        box-sizing: border-box;
      }

      .avatar_f94206 {
        top: -143px;
      }
    }

    .body_b9fccc {
      position: relative;
      top: 150px;
      height: calc(100% - 185px);

      .container_c32acf {
        position: relative;
        top: 0px;
        left: 150px;
        z-index: 1;
        font-size: 23px;
        font-weight: 600;
      }

      .overlay_b9fccc {
        margin-top: 80px;
      }
    }

    .mask_c51b4e rect[fill="black"],
    .mask_c51b4e circle[fill="black"] {
      display: none;
    }
    .mask_c51b4e .cursorDefault_c51b4e rect,
    .mask_c51b4e .pointerEvents_c51b4e {
      rx: calc(1px + var(--status-radius));
      ry: calc(1px + var(--status-radius));
    }

    // -- Activities --
    .activityProfileV2_c1d9fd {
      padding: 16px;
      margin: 12px;
      border-radius: 5px;
      overflow: hidden;
      z-index: 1;

      .headerText_c1d9fd,
      .activityName_c1d9fd,
      .null,
      .details_c1d9fd,
      .name_c1d9fd,
      .nameNormal_c1d9fd,
      .nameWrap_c1d9fd {
        color: white;
      }
    }

    // Connections
    .connectedAccountContainer_ab12c6 {
      position: relative;
      padding: 0;
      outline: 2px solid rgba(0, 0, 0, 0.25);
      border: none;
      border-radius: 4px;
      width: 296px;
      transition: outline-color 100ms;
      overflow: hidden;

      .connectedAccount_ab12c6 {
        height: 100%;

        .connectedAccountIcon_ab12c6 {
          padding: 12px;
          border-radius: 0;
          height: 100%;
        }

        .connectedAccountNameContainer_ab12c6 {
          padding: 12px 12px 12px 4px;
        }
      }

      &.connectedAccountContainerWithMetadata_ab12c6 .connectedAccount_ab12c6 {
        align-items: flex-start;
        padding-bottom: 20px;

        .connectedAccountIcon_ab12c6 {
          padding: 12px;
          width: 48px;
          box-sizing: border-box;
        }
      }

      .connectedAccountChildren_ab12c6 {
        position: absolute;
        left: 0;
        bottom: 12px;
        margin-left: 60px;
      }
    }

    // Mutuals
    .listRow_d2d6cb {
      margin: 0;
      padding: 8px 12px;
    }

    .pencilContainer_c3e427 {
      display: none;
    }
  }

  .connectionIcon_e2a436[alt="Battle.net"],
  .accountButtonInner_e2a436[aria-label="Battle.net"],
  .connectedAccountIcon_ab12c6[aria-label="Battle.net"] {
    background-color: #1da0f248;
  }

  .connectionIcon_e2a436[alt="Twitch"],
  .accountButtonInner_e2a436[aria-label="Twitch"],
  .connectedAccountIcon_ab12c6[aria-label="Twitch"] {
    background-color: #601bd852;
  }

  .connectionIcon_e2a436[alt="YouTube"],
  .accountButtonInner_e2a436[aria-label="YouTube"],
  .connectedAccountIcon_ab12c6[aria-label="YouTube"] {
    background-color: #d9252b49;
  }

  .connectionIcon_e2a436[alt="X"],
  .accountButtonInner_e2a436[aria-label="X"],
  .connectedAccountIcon_ab12c6[aria-label="X"] {
    background-color: rgba(0, 0, 0, 0.25);
  }

  .connectionIcon_e2a436[alt="Steam"],
  .accountButtonInner_e2a436[aria-label="Steam"],
  .connectedAccountIcon_ab12c6[aria-label="Steam"] {
    background-color: #00000034;
  }

  .connectionIcon_e2a436[alt="Reddit"],
  .accountButtonInner_e2a436[aria-label="Reddit"],
  .connectedAccountIcon_ab12c6[aria-label="Reddit"] {
    background-color: #fe44013d;
  }

  .connectionIcon_e2a436[alt="Facebook"],
  .accountButtonInner_e2a436[aria-label="Facebook"],
  .connectedAccountIcon_ab12c6[aria-label="Facebook"] {
    background-color: #2e327685;
  }

  .connectionIcon_e2a436[alt="Spotify"],
  .accountButtonInner_e2a436[aria-label="Spotify"],
  .connectedAccountIcon_ab12c6[aria-label="Spotify"] {
    background-color: #1ed75f34;
  }

  .connectionIcon_e2a436[alt="Xbox"],
  .accountButtonInner_e2a436[aria-label="Xbox"],
  .connectedAccountIcon_ab12c6[aria-label="Xbox"] {
    background-color: #5dc21e36;
  }

  .connectionIcon_e2a436[alt="League of Legends"],
  .accountButtonInner_e2a436[aria-label="League of Legends"],
  .connectedAccountIcon_ab12c6[aria-label="League of Legends"] {
    background-color: #cea14638;
  }

  .connectionIcon_e2a436[alt="GitHub"],
  .accountButtonInner_e2a436[aria-label="GitHub"],
  .connectedAccountIcon_ab12c6[aria-label="GitHub"] {
    background-color: #24292e62;
  }

  .connectionIcon_e2a436[alt="Skype"],
  .accountButtonInner_e2a436[aria-label="Skype"],
  .connectedAccountIcon_ab12c6[aria-label="Skype"] {
    background-color: #0076d74b;
  }

  .connectionIcon_e2a436[alt="Epic Games"],
  .accountButtonInner_e2a436[aria-label="Epic Games"],
  .connectedAccountIcon_ab12c6[aria-label="Epic Games"] {
    background-color: #2f2f2f59;
  }

  .connectionIcon_e2a436[alt="Riot Games"],
  .accountButtonInner_e2a436[aria-label="Riot Games"],
  .connectedAccountIcon_ab12c6[aria-label="Riot Games"] {
    background-color: #eb1c2d38;
  }

  .connectionIcon_e2a436[alt="PayPal"],
  .accountButtonInner_e2a436[aria-label="PayPal"],
  .connectedAccountIcon_ab12c6[aria-label="PayPal"] {
    background-color: #009fe33b;
  }

  .connectionIcon_e2a436[alt="TikTok"],
  .accountButtonInner_e2a436[aria-label="TikTok"],
  .connectedAccountIcon_ab12c6[aria-label="TikTok"] {
    background-color: #64bfc546;
  }

  .connectionIcon_e2a436[alt="eBay"],
  .accountButtonInner_e2a436[aria-label="eBay"],
  .connectedAccountIcon_ab12c6[aria-label="eBay"] {
    background-color: #c500003b;
  }

  .connectionIcon_e2a436[alt="PlayStation Network"],
  .accountButtonInner_e2a436[aria-label="PlayStation Network"],
  .connectedAccountIcon_ab12c6[aria-label="PlayStation Network"] {
    background-color: #0051ae53;
  }

  .connectionIcon_e2a436[alt="Instagram"],
  .accountButtonInner_e2a436[aria-label="Instagram"],
  .connectedAccountIcon_ab12c6[aria-label="Instagram"] {
    background-color: rgba(175, 1, 182, 0.25);
  }

  .connectionIcon_e2a436[alt="Roblox"],
  .accountButtonInner_e2a436[aria-label="Roblox"],
  .connectedAccountIcon_ab12c6[aria-label="Roblox"] {
    background-color: rgba(182, 191, 204, 0.25);
  }

  .connectionIcon_e2a436[alt="Crunchyroll"],
  .accountButtonInner_e2a436[aria-label="Crunchyroll"],
  .connectedAccountIcon_ab12c6[aria-label="Crunchyroll"] {
    background-color: rgba(243, 117, 33, 0.3);
  }
}