/*
  Community username materials.

  These gradients mirror the visual palettes used by the achievement-rank
  badges. Keep this file loaded after community.css so one canonical treatment
  wins across Profile, leaderboard, previews, Training authors, and the in-app
  public-profile modal.
*/

:root {
  --otl-community-username-bronze:
    linear-gradient(
      105deg,
      #623015 0%,
      #9a572d 24%,
      #d9a36b 50%,
      #9d5b31 76%,
      #5d2a13 100%
    );

  --otl-community-username-silver:
    linear-gradient(
      105deg,
      #65707c 0%,
      #aeb7c2 24%,
      #eef2f6 50%,
      #a6b0bb 76%,
      #5d6875 100%
    );

  --otl-community-username-gold:
    linear-gradient(
      105deg,
      #8f6505 0%,
      #c99415 24%,
      #f3d35f 50%,
      #cf991d 76%,
      #7e5704 100%
    );

  --otl-community-username-diamond:
    linear-gradient(
      105deg,
      #0b6f77 0%,
      #1aa7b2 24%,
      #8fe6e8 50%,
      #20afb9 76%,
      #08646c 100%
    );

  --otl-community-username-sapphire:
    linear-gradient(
      105deg,
      #174b8d 0%,
      #2e6bc3 24%,
      #7ca9ef 50%,
      #3371ca 76%,
      #123f7a 100%
    );

  --otl-community-username-emerald:
    linear-gradient(
      105deg,
      #006432 0%,
      #009b58 24%,
      #69dda0 50%,
      #00a25f 76%,
      #00592d 100%
    );

  --otl-community-username-amethyst:
    linear-gradient(
      105deg,
      #4f3290 0%,
      #7355c0 24%,
      #ae99ef 50%,
      #795bc6 76%,
      #472c84 100%
    );

  --otl-community-username-ruby:
    linear-gradient(
      105deg,
      #920039 0%,
      #cd0456 24%,
      #ef76a3 50%,
      #d30662 76%,
      #850033 100%
    );

  --otl-community-username-prismatic:
    linear-gradient(
      105deg,
      #6fdde2 0%,
      #e8fbfb 18%,
      #f2c8e7 36%,
      #d0b8f3 55%,
      #f7fbff 76%,
      #72d7df 100%
    );

  --otl-community-username-spectral:
    linear-gradient(
      105deg,
      #c85bca 0%,
      #665ee8 13%,
      #38a9e8 25%,
      #31c7c6 37%,
      #55c96f 49%,
      #d8d94e 61%,
      #f4bb3e 73%,
      #f27a49 86%,
      #e94d6b 100%
    );
}

:is(
  .otl-community-preview-username,
  .otl-community-preview-theme-value,
  .otl-community-podium-username,
  .otl-community-leaderboard-username,
  .otl-community-profile-modal-identity h3,
  .otl-community-themed-username,
  #otlCommunityProfilePreviewUsername
)[data-theme]:not([data-theme="default"]) {
  color:
    transparent !important;

  background-image:
    var(--otl-community-username-gradient) !important;

  background-repeat:
    no-repeat;

  background-size:
    100% 100%;

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;
}

:is(
  .otl-community-preview-username,
  .otl-community-preview-theme-value,
  .otl-community-podium-username,
  .otl-community-leaderboard-username,
  .otl-community-profile-modal-identity h3,
  .otl-community-themed-username,
  #otlCommunityProfilePreviewUsername
)[data-theme="bronze"] {
  --otl-community-username-gradient:
    var(--otl-community-username-bronze);
}

:is(
  .otl-community-preview-username,
  .otl-community-preview-theme-value,
  .otl-community-podium-username,
  .otl-community-leaderboard-username,
  .otl-community-profile-modal-identity h3,
  .otl-community-themed-username,
  #otlCommunityProfilePreviewUsername
)[data-theme="silver"] {
  --otl-community-username-gradient:
    var(--otl-community-username-silver);
}

:is(
  .otl-community-preview-username,
  .otl-community-preview-theme-value,
  .otl-community-podium-username,
  .otl-community-leaderboard-username,
  .otl-community-profile-modal-identity h3,
  .otl-community-themed-username,
  #otlCommunityProfilePreviewUsername
)[data-theme="gold"] {
  --otl-community-username-gradient:
    var(--otl-community-username-gold);
}

:is(
  .otl-community-preview-username,
  .otl-community-preview-theme-value,
  .otl-community-podium-username,
  .otl-community-leaderboard-username,
  .otl-community-profile-modal-identity h3,
  .otl-community-themed-username,
  #otlCommunityProfilePreviewUsername
)[data-theme="diamond"] {
  --otl-community-username-gradient:
    var(--otl-community-username-diamond);
}

:is(
  .otl-community-preview-username,
  .otl-community-preview-theme-value,
  .otl-community-podium-username,
  .otl-community-leaderboard-username,
  .otl-community-profile-modal-identity h3,
  .otl-community-themed-username,
  #otlCommunityProfilePreviewUsername
)[data-theme="sapphire"] {
  --otl-community-username-gradient:
    var(--otl-community-username-sapphire);
}

:is(
  .otl-community-preview-username,
  .otl-community-preview-theme-value,
  .otl-community-podium-username,
  .otl-community-leaderboard-username,
  .otl-community-profile-modal-identity h3,
  .otl-community-themed-username,
  #otlCommunityProfilePreviewUsername
)[data-theme="emerald"] {
  --otl-community-username-gradient:
    var(--otl-community-username-emerald);
}

:is(
  .otl-community-preview-username,
  .otl-community-preview-theme-value,
  .otl-community-podium-username,
  .otl-community-leaderboard-username,
  .otl-community-profile-modal-identity h3,
  .otl-community-themed-username,
  #otlCommunityProfilePreviewUsername
)[data-theme="amethyst"] {
  --otl-community-username-gradient:
    var(--otl-community-username-amethyst);
}

:is(
  .otl-community-preview-username,
  .otl-community-preview-theme-value,
  .otl-community-podium-username,
  .otl-community-leaderboard-username,
  .otl-community-profile-modal-identity h3,
  .otl-community-themed-username,
  #otlCommunityProfilePreviewUsername
)[data-theme="ruby"] {
  --otl-community-username-gradient:
    var(--otl-community-username-ruby);
}

:is(
  .otl-community-preview-username,
  .otl-community-preview-theme-value,
  .otl-community-podium-username,
  .otl-community-leaderboard-username,
  .otl-community-profile-modal-identity h3,
  .otl-community-themed-username,
  #otlCommunityProfilePreviewUsername
)[data-theme="prismatic"] {
  --otl-community-username-gradient:
    var(--otl-community-username-prismatic);

  filter:
    drop-shadow(
      0 0 4px
      rgba(196, 181, 253, .09)
    );
}

:is(
  .otl-community-preview-username,
  .otl-community-preview-theme-value,
  .otl-community-podium-username,
  .otl-community-leaderboard-username,
  .otl-community-profile-modal-identity h3,
  .otl-community-themed-username,
  #otlCommunityProfilePreviewUsername
)[data-theme="spectral"] {
  --otl-community-username-gradient:
    var(--otl-community-username-spectral);

  filter:
    drop-shadow(
      0 0 4px
      rgba(56, 189, 248, .10)
    );
}