/* Scrollbar */

html.dark-mode::-webkit-scrollbar-track {
  background-color: $darkLight;
}

html.dark-mode::-webkit-scrollbar-thumb {
  background-color: #596b7d;
}

html.dark-mode::-webkit-scrollbar-thumb:hover {
  background-color: #425466;
}

html.dark-mode::-webkit-scrollbar-thumb:active {
  background-color: #364657;
}

/* React Root */

html.dark-mode #react-root {
  color: $bright;
}

/* Main container */

html.dark-mode #react-root main {
  background-color: $dark;
}


/* Links */

html.dark-mode #react-root a,
html.dark-mode #react-root a:visited {
  color: $blue;
}


/* Username */

html.dark-mode #react-root ._4zhc5,
html.dark-mode #react-rrot ._4zhc5:visited,
html.dark-mode #react-root ._2uju6 {
  color: $bright;
}


/* photo container bg */

html.dark-mode #react-root ._22yr2,
html.dark-mode #react-root ._h2d1o._j5hrx._pieko {
  background-color: $dark;
  border-style: none;
}


/* photo border, split */

html.dark-mode #react-root ._pieko ._e0mru {
  border-color: $darkLight;
}


/* Profile thumbnail */

html.dark-mode #react-root ._5lote {
  background-color: $dark;
  border: 1px solid $darkLight;
}


/* photo desc */

html.dark-mode #react-root ._lx2l2,
html.dark-mode #react-root ._lx2l2:visited,
html.dark-mode #react-root ._oajsw {
  color: inherit;
}


/* split */

html.dark-mode #react-root ._jveic {
  border-top: 1px solid $darkLight;
}


/* time-stamp, location, paid partnership text */

html.dark-mode #react-root ._q8ysx,
html.dark-mode #react-root ._q8ysx:visited,
html.dark-mode #react-root ._6y8ij,
html.dark-mode #react-root ._6y8ij:visited,
html.dark-mode #react-root ._rnlnu,
html.dark-mode ._nr3h3,
html.dark-mode ._s7b66 {
  color: $gray;
}

/* Location Post Listing Text */

html.dark-mode ._qkuz0,
html.dark-mode ._52qm9 {
  color: $white;
}

/* likes */

html.dark-mode #react-root ._3sst1 {
  color: $bright;
}


/*add profile photo popup*/

html.dark-mode #react-root ._82fo9._29u55 {
  background-color: $dark;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}


/*comment input text color*/

html.dark-mode #react-root ._7uiwk._qy55y {
  color: $white;
}


/* Dialog */

html.dark-mode ._bt6iq,
html.dark-mode ._gwvmk,
html.dark-mode ._bt6iq,
html.dark-mode ._4y3e3 {
  color: $bright;
  border-color: $darkLight;
  background-color: $dark;
}


/*Header*/

html.dark-mode #react-root header {
 &._l1b8m, &._q44m8 {
    background-color: $darkLight;
    border-color:rgba(255, 255, 255, 0.0784314);
  }
  &._l1b8m::before{
    background-color:rgba(255, 255, 255, 0.0784314);
  }
}

/*Header text*/

html.dark-mode ._tkl3w {
  color: #fafafa;
}

/*Add a new photo*/

html.dark-mode {
  ._41f3i, ._fnbsm, ._9r8i9, ._g59ip {
    background-color: $dark;
    border-color: $darkLight;
    color: $white;
  }
}

/* Report a problem */

html.dark-mode {
  ._61vr4 {
    background-color: $dark;
    h1._3smff,
    p._1ln98 {
      color: $bright;
    }
  }
}

/* Title(s), Heart, Dropdown Arrow, Close, and Comment images */

html.dark-mode {
  .coreSpriteHeartOpen,
  .coreSpriteMobileNavTypeLogo,
  .coreSpriteComment,
  .coreSpriteOptionsEllipsis,
  .coreSpriteMobileNavSettings,
  .coreSpriteDropdownArrowGrey9,
  .coreSpriteLoggedOutWordmark,
  .coreSpriteClose,
  .coreSpriteMobileNavDiscoverPeople,
  .coreSpriteNotificationLeftChevron {
    filter: invert(100%);
  }
}

/* Likes, Views count & Follow request text */

html.dark-mode {
  ._nzn1h, ._m5zti, ._o7xyo {
    color: $bright;
  }
}

/* "and" & "like this" text (likes) */

html.dark-mode ._3gwk6._nt9ow {
  color: $bright;
}

/*Grid background*/
html.dark-mode ._eskl6 {
  background: $dark;
}

html.dark-mode ._s6yvg {
  border-color: $darkLight;
}

/* Text Input (e.g. comments) */

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  border-color: $dark;
  background-color: $darkLight;
  color: $white;
}

/* Post options */
html.dark-mode ._h74gn {
  background: $dark;
  color: $bright;
}

/* Discover people */
html.dark-mode {
  ._6e4x5,
  ._b9n99 {
    background: $dark;
  }
}

/* Embed dialog */
html.dark-mode ._dnf8p {
  background: $dark;
  border: 1px solid $darkLight;
}

/* Annoying 1px white line at the bottom */
html.dark-mode ._4pxed::before {
  background: $dark;
}

/* Annoying margins at the bottom */
html.dark-mode {
  ._dmx7t,
  ._j54dd,
  ._lq68t {
    margin: 0;
  }
}

/* Stories Selection */

html.dark-mode {
  ._hr9tt {
    background: $darkLight;
    border-color: $dark;
  }
  ._fdrjr, ._ocij3 {
    color: $white;
  }
  ._sq4bv._29u45._snde0 {
    background-color: $dark;
  }
}
