/* ==UserStyle==
@name         Twitter Moonlight
@namespace    github.com/brettm12345/twitter-moonlight
@homepageURL  https://github.com/brettm12345/twitter-moonlight
@supportURL   https://github.com/brettm12345/twitter-moonlight/issues
@updateURL    https://raw.githubusercontent.com/brettm12345/twitter-moonlight/master/twitter.user.styl
@version      1.0.5
@license      unlicense
@author       brettm12345

@var color blue       "Blue"             #82aaff
@var color blue-trans "Transparent Blue" #82aaff1a

@var color purple "Purple" #c597f9

@var color red       "Red"             #ff5370
@var color red-trans "Transparent Red" #ff53701a

@var color green       "Green"             #4fd6be
@var color green-trans "Transparent Green" #4fd6be1a

@var color backdrop "Backdrop" rgba(0, 0, 0, 0.6)

@var color scrollbar-thumb " Scrollbar Thumb" #292c41

@var color border      "Border"      #131421
@var color background  "Background"  #191b28
@var color alternative "Alternative" #1e2030
@var color highlight   "Highlight"   #222436
@var color icon        "Icon"        #2f334d
@var color text        "Text"        #828bb8
@var color text-light  "Text Light"  #ffffff

@preprocessor   stylus
==/UserStyle== */

@-moz-document domain("twitter.com")
  :root
    --blue     blue
    --blue-trans blue-trans

    --red     red
    --red-trans red-trans

    --green     green
    --green-trans green-trans

    --purple purple

    --backdrop backdrop

    --scrollbar-thumb scrollbar-thumb

    --border border
    --bg background
    --alt alternative
    --highlight highlight
    --icon icon
    --fg text
    --fg-light text-light

  bg(c)
    background-color c

  fg(c)
    color c

  bc(c)
    border-color c

  shadow()
    box-shadow 0 4px 6px -1px rgba(0, 0, 0, 0.58), 0 2px 4px -1px rgba(0, 0, 0, 0.29)

  $scrollbar-thumb = var(--scrollbar-thumb)

  $blue = var(--blue)
  $blue-trans = var(--blue-trans)

  $red = var(--red)
  $red-trans = var(--red-trans)

  $green = var(--green)
  $green-trans = var(--green-trans)

  $purple = var(--purple)

  $backdrop = var(--backdrop)
  $border = var(--border)
  $bg = var(--bg)
  $alt = var(--alt)
  $highlight = var(--highlight)
  $icon = var(--icon)
  $fg = var(--fg)
  $fg-light = var(--fg-light)

  $text-light = var(--text-light)

  ::-webkit-scrollbar
    background-color $alt !important

  ::-webkit-scrollbar-thumb
    background-color $scrollbar-thumb !important

  body,
  .r-1srlen8 // Loading,
  .r-1awozwy.r-aqfbo4.r-yfoy6g.r-18u37iz.r-1mwlp6a.r-1a8r3js.r-15ysp7h.r-1xcajam.r-ipm5af.r-1hycxz.r-136ojw6 // Searchbar surrounding area
    background-color $bg !important

  input::placeholder
    color $fg !important

  // Default border
  .r-1ila09b,
  .r-18bvks7 { bc: $border }

  // Default foreground color
  .r-111h2gw { fg: $fg }

  // Tweets/Sidebar section
  .r-yfoy6g, .r-1uaug3w
    bg $alt
    bc $border


  // Timeline
  div[aria-label*="Timeline"]

    // Menu
    div[role="menu"]
      bg $bg
      shadow()
      // Menu item hover
      *[role="menuitem"]:hover { bg: $alt }

    // Embeded media
    .r-1uaug3w.r-1pi2tsx.r-1udh08x.r-13qz1uu,
    .r-18bvks7 { bg: $bg }

    // Embeded media hover
    div.r-1cuuowz { bg: $highlight }

  // Backdrop
  .r-11u3ssh { bg: $backdrop }

  // Checkbox
  .r-1awozwy.r-yfoy6g.r-1778zho.r-z2wwpe.r-1phboty.r-d045u9.r-76blku.r-1777fci.r-64lmo0
    bc $icon

  // Word count indicator
  div[role="progressbar"] circle[stroke="#38444D"]
    stroke $icon

  // Icon section
  .r-1kfrmmb { bc: $border }

  // Tweet author
  .r-1t982j2
    margin-bottom 10px

  // Tweet click
  .r-1nvv5a4 { bg: $highlight }

  // Tweet separator
  .r-1adg3ll .r-aaos50 { bg: $alt }

  // Separator after new tweet
  .r-vz2u4x
    background-color $alt !important

  // List separator
  .r-kuekak { bg: $border }

  // Selected Searchbar
  .r-1awozwy.r-aqfbo4.r-yfoy6g.r-18u37iz.r-1mwlp6a.r-1a8r3js.r-15ysp7h.r-1xcajam.r-ipm5af.r-1hycxz.r-136ojw6
    bg $highlight

  // Searchbar
  .r-aaos50
    bg $highlight
    bc $border

  // Popup eg. Search results / Menu
  .r-xnswec
    bg $highlight
    border 1px solid $border
    shadow()

  // Separator between word counter and + button
  .r-hpzmsf { bg: $icon }

  // Purple Icons
  path[fill="#794BC4"]
    fill $purple

  // Heart
  .r-daml9f { fg: $red }
  .r-wcu338 { bg: $red-trans }

  // Retweet
  .r-nw8l94 { fg: $green }
  .r-1up5ays { bg: $green-trans }

  // Comment/Download
  .r-13gxpu9 { fg: $blue }
  .r-zv2cs0 { bg: $blue-trans }

  // Message
  .r-hjejmn
    bg $bg

  // Embed
  .r-wrkyx5 { bc: $border }

  // Analytics
  body[data-scribe-origin="Mobile"]
    background-color $alt !important

  .QuoteTweet { bc: $border }
  .QuoteTweet [data-item-type=tweet] { bg: $border }

  .ProfileTweet-screenname { fg: $fg }
  .ProfileTweet-fullname { fg: $fg-light }

  .ep-TweetPerformance.ep-Section
    .ep-ViewAllEngagementsButton { bg: $alt }
    .ep-MetricDescription { fg: $fg }
    .ep-Metric .ep-MetricTopContainer { fg: $fg-light }

  .ep-Signup .ep-SignupTextContainer
    .ep-SignupText { fg: $fg-light }
    .ep-SignupSubText { fg: $fg }

  .ep-TweetPerformance.ep-Section .ep-DetailedEngagementsSection,
  .ep-Campaign
    border-top-color $border

  // TODO: Clean this up
  .QuoteTweet .tweet-content, .QuoteTweet-text a, .QuoteTweet-text a:hover, .QuoteTweet-text a:focus, .QuoteTweet-text a:active, .QuoteTweet-text .pretty-link b, .QuoteTweet-text .pretty-link s, .QuoteTweet-text .pretty-link:hover b, .QuoteTweet-text .pretty-link:hover s, .QuoteTweet-text .pretty-link:focus b, .QuoteTweet-text .pretty-link:focus s, .QuoteTweet-text .pretty-link:active b, .QuoteTweet-text .pretty-link:active s
    fg $fg-light