$svg-platform-colors: (
  //online indicators (not var based)
  $yellow: #ca9654,
  $red: #d83a42,
  $green: #43a25a,
  $overlay1: #82838b,
  "var(--twitch)": #9147ff
);
@each $var, $color in $svg-platform-colors {
  svg [fill="#{$color}"],
  svg[fill="#{$color}"] {
    fill: #{$var};
  }

  div[style="background-color: rgb(#{red($color)}, #{green($color)}, #{blue($color)});"] {
    background-color: #{$var} !important;
  }
}

div[class^="newMessagesBar_"] {
  --white: #{$crust};
  --button-secondary-background: var(--brand);
  --button-secondary-background-hover: var(--brand-530);
}

div[class^="expandedFolderBackground_"] {
  --background-mod-subtle: #{$mantle} !important;
}

// Switches
// Literally a single switch doesnt have the parent control_ class... so annoying
// div[class^="container_"][style*="opacity: 1; background-color:"]
div[class^="control_"] > div[class^="container_"] {
  background-color: #{$surface2} !important;
  transition: background-color 0.2s;

  > svg {
    > rect {
      fill: var(--white);
      transition: fill 0.2s;
    }
    > svg > path {
      fill: #{$surface2};
      transition: fill 0.2s;
    }
  }

  &[class*="checked_"] {
    background-color: var(--brand-500) !important;

    > svg {
      > rect {
        fill: #{$crust};
      }
      > svg > path {
        fill: var(--brand-500);
      }
    }
  }
}

// Vencord custom switches
div[class^="vc-addon-card"] > div div[class^="container_"] {
  --primary-400: #{$surface2};
  transition: background-color 0.2s;
  > svg > rect {
    fill: var(--white);
    transition: fill 0.2s;
  }

  &[class*="checked_"] > svg > rect {
    fill: #{$crust};
  }
}

// system message icons
div[class^="message"][class*="isSystemMessage"] div[class^="icon"] {
  // User Joined icon
  &[style*="/assets/61ccab047dad737a.svg"] {
    @include recolor($green);
  }

  // Missed call icon
  &[style*="/assets/6f076a64de25de4b.svg"] {
    @include recolor($subtext0);
  }

  // Left server/group icon
  &[style*="/assets/53e42368b1409f1a.svg"] {
    @include recolor($red);
  }
  // Joined server/group icon
  &[style*="/assets/8b9de960da063cb9.svg"] {
    @include recolor($green);
  }
}

img[class*="maskIcon"][src*="/assets/c8ae30e56eb87fdf.svg"] {
  @include recolor($crust);
}

i[class^="check_"] {
  @include recolor($brand);
}

// Quests page gradient
div[class^="overlay_"][class*="darkThemeGradient_"] {
  background: linear-gradient(
    0deg,
    #{$base} 0,
    rgba($surface0, 0.5) 50%,
    rgba($surface1, 0)
  );
}

// Forum tags and gallery gradient
div[class^="textContentFooter_"] {
  background: linear-gradient(
    0deg,
    $base,
    rgba($surface0, 0.97) 36px,
    rgba($surface1, 0.4)
  ) !important;
  [class*="tagPill_"] {
    background-color: #{rgba($surface1, 0.9)};
  }
}
// Forum new badge / OP tag
div[class^="newBadge_"][class*="textBadge_"][style="background-color: var(--brand-260);"],
span[class*="botTagOP_"] {
  color: var(--badge-brand-text);
}

div[class^="quickSelectPopoutOption_"]:hover[role="option"] {
  background-color: var(--background-modifier-hover);
}

// VC controls
[class*="greenGlow_"] {
  background: #{adjust-color($green, $alpha: -0.9)};
  &:hover {
    background: #{adjust-color($green, $alpha: -0.8)};
  }
}
[class*="redGlow_"] {
  background: #{adjust-color($red, $alpha: -0.9)};
  &:hover {
    background: #{adjust-color($red, $alpha: -0.8)} !important;
  }
}
button[class^="experimentButton_"][class*="buttonColor_"][class*="buttonActive_"] {
  background-color: #{adjust-color($green, $alpha: -0.9)};
  border: 1px solid #{adjust-color($green, $alpha: -0.9)};
  &:hover {
    background-color: #{adjust-color($green, $alpha: -0.8)};
  }
}

// Universally style inline styles
[style*="color: white"] {
  color: var(--white) !important;
}

// Search bar and text input borders follow accent
div[class*="container_"]:focus-within:has(> div[class^="inner_"] > input),
[class*="input_"][type="text"]:not([readOnly]):focus,
[class*="input_"][type="text"]:not([readOnly]):focus:hover {
  --text-link: var(--brand-500);
}
