div[class^="accountProfileCard-"] div[class^="userInfo-"] {
  // settings
  justify-content: left;
  padding-top: 24px;
  height: 56px;

  button {
    margin-left: 32px;
    margin-top:  -8px;
  }

  div[class^="avatar-"] {
    background-color: var(--background-tertiary) !important;
    top: 0;
    border-radius: 0 !important;
    border-bottom-right-radius: 50% !important;
  }
}

.profile() when (@no-nitro = true) {
  [class^="botTagVerified-"],
  [class^="badgeList-"],
  [class^="profileBadges-"],
  { &:extend(.nitro); }
}
.profile() when (@no-banner = true) {
  div[class^="listItemContents-"] div[class^="userInfo"] {
    padding-top: 0;
    div[class^="avatar-"] {
      top: 0;
    }
  }

  div[class^="userPopout-"],
  div[class^="profileBannerPreview-"] {
    div[class^="avatarWrapper"] {
      top: 8px; // fix divider bug
    }

    div[class^="headerTop-"] {
      padding-top: 72px; // also fix divider bug
      div[class^="headerText"] {
        margin-left: 96px; // fix nickname
      }
    }
  }

  div[class^="profileBanner"] div[class*="avatar"]:not([class^="imageUploaderInner"]) {
    margin-left: -8px;
    margin-top: -8px;
  }
}
.profile();

// Profile card in settings
div[class^="accountProfileCard-"] {
  div[class^="field-"]:nth-child(1) {
    height: 0;
    div[class^="constrainedRow-"] {
      display: none;
    }
    button {
      top: -48pt;
      left: 300pt;
    }
  }
}

div[class^="banner-"] {
  position: absolute;
  width: inherit;
  max-height: 84px;
  &:extend(.rounder);
  &[class*="popoutBanner"] {
    position: relative;
    max-height: 128px;
    .bottom-border();
  }
}

div[class^="avatarWrapper-"] {
  margin-right: auto; // make some space after avatar (sidebar at bottom)
}

// Redesigned profile page
header div[class^="nameTagWithCustomStatus-"],
header div[class^="nameTagNoCustomStatus-"] {
  margin-bottom: 48px; // some space under avatar
  margin-left:  160px; // after avatar, not before
}

div[class^="focusLock-"]:not([aria-labelledby]) > div[class^="root-"][class*="small-"] {
  flex-direction: row;

  header {
    width: 260px;
    margin: 24px;

    div[class^="avatar-"] {
      top: 0; left: 0;
      position: relative;
    }

    div[class^="headerTop-"] {
      position: unset;
      justify-content: left;
    }

    div[class^="nameTag"] {
      width: 64px;
      position: absolute;
      margin-top: -84px;
      margin-left: 130px;
    }

    div[class^="customStatus"] {
      margin-top: 16px;
      padding: 0;
    }
  }
  div[class^="body-"] {
    border: none;
    margin-left: 16px;
    height: 370px;
    & > *
    { padding: 0 !important; }
  }
  div[class^="tabBarContainer"]
  { border: none; }
  div[class^="tabBar-"] {
    flex-direction: column;
    height: unset;
    margin: 8px;
  }

  div[class^="tabBarItem-"] {
    margin-right: 0;
    border-bottom: unset;
    &:hover, &[class*="selected-"] {
      border-right: 2px solid var(--interactive-active) !important;
    }
    .top-border();
    .left-border(@round);
  }
}