/* USER PROFILES */

// FIXES POPOUT BG
%fullMotion %popoutTranslate {
  transform: unset !important;
}

// NO CUSTOM PROFILE
%userProfileOuter:not(%userProfileCustomTheme, %userSettingsProfilePreview) {
  background: transparent;
  %userProfileInner {
    // POPOUT
    &%userProfileSmall {
      background: cv('bg.popout.overlay');
      &::before {
        content: '';
        position: absolute;
        @include stretch;
        background: cv('bg.popout.img') cv('bg.popout.pos') / cv('bg.popout.size') cv('bg.popout.repeat') cv('bg.popout.attach');
        @include filters(cv('bg.popout'));
        z-index: -1;
      }
    }

    // MODAL
    &%userProfileFull {
      background: cv('bg.general.card');
      &::before {
        content: '';
        position: absolute;
        background: cv('bg.modal.img') cv('bg.modal.pos') / cv('bg.modal.size') cv('bg.modal.repeat') cv('bg.modal.attach');
        @include filters(cv('bg.modal'));
        width: 100%;
        height: 100%;
        z-index: -1;
      }
    }
  }

  // STATUS
  %themeDark & %userProfileStatusBubbleOuter {
    background: hsla(0, 0%, 0%, 0.6);
    border-color: transparent;
    &::before {
      background: hsla(0, 0%, 0%, 0.6);
      border-color: transparent;
      height: 10px;
      border-radius: 10px 10px 0 0;
    }
    &::after {
      background: hsla(0, 0%, 0%, 0.6);
      border-color: transparent;
    }
  }
  %userProfileStatusBubble {
    background: transparent;
  }

  // BANNER
  %userProfileBanner {
    mask: linear-gradient(to bottom, #000, transparent 93%);
  }

  // CONTENT
  %userProfileOverlay {
    background-color: cv('bg.general.card');
  }
  %userProfileBadgeList {
    background-color: cv('bg.general.card');
  }

  // CONNECTED ACCOUNTS
  %userProfileConnectedAccountContainer {
    background: hsla(0, 0%, 100%, 0.04);
    border-color: transparent;
    border-radius: 5px;
  }

  // LIST
  %userProfileListRow {
    transition: all 0.15s ease-in-out;
    &:hover {
      background: linear-gradient(to right, hsla(0, 0%, 100%, 0.04) 10%, hsla(0, 0%, 100%, 0.04) 90%, transparent);
    }
  }

  // NOTES
  %userProfileNote {
    textarea:focus {
      background-color: hsla(0, 0%, 100%, 0.07);
    }
  }
}


// CUSTOM PROFILE
%userProfileCustomTheme {
  %userProfileOverlayScroller {
    &::-webkit-scrollbar-thumb {
      background-color: (--profile-gradient-secondary-color);
    }
  }
  %userProfileNote {
    %input:focus {
      box-shadow: 0 0 2px 2px var(--profile-gradient-primary-color);
    }
  }
  %channelTextArea {
    background: var(--input-background);
    &:focus-within {
      box-shadow: 0 0 2px 2px var(--profile-gradient-primary-color);
    }
  }
}

// GENERAL
// CONNECTED ACCOUNTS
%userProfileConnectedAccountVerifiedIcon {
  background: url(https://clearvision.github.io/icons/verified.svg) center/18px no-repeat;
  opacity: 0.5;
  z-index: 1;
  %flowerStar {
    opacity: 0;
  }
  %flowerStarChild {
    display: none;
  }
}
%userProfileConnectedAccountOpenIcon {
  background: url(https://clearvision.github.io/icons/popout.svg) center/18px no-repeat;
  opacity: 0.3;
  transition: all 0.15s ease-in-out;
  transform: none;
  > polygon {
    display: none;
  }
}

// MESSAGE USER
html:not(%visualRefreshChatInput) %userProfileMessage {
  background: transparent;
}