@import 'variables.styl'

$container
  max-width: 1200px
  margin: auto auto
  @media screen and (max-width: 1200px)
    padding: 0 1rem

body
  background: $white
  margin: 0
  overflow-y: scroll

body,
button,
pre
  font-family: 'Noto Sans', sans-serif

.container
  @extend $container

.trend
  position: relative
  width: 300px
  .body
    margin-top: 2rem
    width: 100% !important
  .recharts-tooltip-wrapper
    position: absolute
    transform: none !important
    top: -2.15rem !important
    left: 2.45rem !important
    background: white
    width: calc(100% - 2.7rem)
  .changes
    font-size: .75rem
    margin-top: -.25rem
    width: 100%
    display: flex
    justify-content: space-between
    > span
      display: inline-block
    svg
      margin-top: -.05rem
  a
    position: absolute
    top: 0
    left: 0
    right: 0
    color: $primary
    display: flex
    text-decoration: none
    &::after
      opacity: 0
    &:hover
      color: $accent
      .changes
        color: $primary
    .title
      display: inline-block
      padding-left: .2rem
      padding-right: .25rem
      margin-top: -.15rem
      width: 100%
      overflow: hidden
      > div:first-of-type
        display: flex
        flex-direction: row
        flex-wrap: nowrap
        justify-content: flex-start
        align-content: flex-start
        align-items: flex-start
        div
          flex: 1 1 auto
          display: inline-block
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
        svg
          flex: 0 1 auto
          font-size: .75rem
          min-width: .75rem
          align-self: center
          margin-right: .2rem
          &.new
            fill: $accent
          *.leftover
            fill: $primary
  a::after,
  &:hover a::after
    content: attr(data-rank)
    position: absolute
    margin-left: .25rem
    height: 2rem
    width: 2rem
    line-height: 2rem
    font-weight: 700
    font-size: .9rem
    text-align: center
    text-shadow: 2px 2px 0 $primary, -1px -1px 0 $primary, 1px -1px 0 $primary, -1px 1px 0 $primary, 1px 1px 0 $primary
    color: $white
  &:hover a::after
    opacity: 1
  .poster
    margin-left: .25rem
    height: 2rem
    width: 2rem
    min-width: 2rem
    overflow: hidden
    border-radius: 999rem
    background: rgba($primary, 0.3)
    img
      height: 2rem
      width: 2rem
      border-radius: 999rem
      object-fit: cover

.bar
  height: 3rem
  background: darken($white, 2)
  border-bottom: 1px solid darken($white, 5)
  position: sticky
  top: 0
  z-index: 999
  &-sorts > .active,
  &-filters > .active
    color: $white
    background: $accent
    border: 1px solid $accent
    border-radius: 0
  &-sorts button.active:hover
    cursor: default
  &-sorts button:not(.active):hover,
  &-filters button:hover
    color: unset
    background: lighten(rgba($primary, 0.8), 70)
  &-filters
    flex: 1
    text-align: center
  .info
    text-align: right
  > div
    @extend $container
    line-height: 3rem
    display: flex
    flex-direction: row
    flex-wrap: nowrap
    justify-content: flex-start
    align-content: center
    align-items: center
    font-size: .9rem
  @media screen and (max-width: 1165px)
    height: 6rem
    > div
      flex-wrap: wrap
    &-sorts,
    &-filters
      margin-top: -.5rem
    &-filters
      text-align: right
    .info
      text-align: center
      flex: 0 0 100%
      order: -1
  @media screen and (max-width: 790px)
    height: auto
    &-sorts,
    &-filters
      display: flex
      flex: 0 0 100%
      line-height: 2rem
      max-height: 3rem
      margin-top: 0
      button
        flex: 1
      span
        text-align: center
        writing-mode: vertical-lr
    &-filters
      text-align: center
      margin: 1rem auto
  button
    line-height: .9rem
    border: 1px solid darken($white, 11)
    border-left: none
    background: darken($white, 2)
    padding: .45rem 1rem
    padding: calc(.45rem*1.5) 1rem
    cursor: pointer
    border: 0
    &:first-of-type
      margin-left: .5rem
    &:last-of-type
      margin-right: .5rem

.pos
  color: green

.neg
  color: red

.link
  position: absolute
  top: 8vw
  text-align: center
  color: $white
  text-transform: uppercase
  text-decoration: none
  width: 80px
  @media screen and (max-width: 770px)
    top: 15vw
  &:hover
    color: $accent
  &.prev
    left: 1rem
    transform: rotate(-90deg)
  &.next
    right: 1rem
    transform: rotate(90deg)

.stats
  display: flex
  justify-content: space-between
  align-content: stretch
  align-items: flex-start
  flex-wrap: wrap
  .recharts-responsive-container
    width: calc(100% - 400px) !important
    @media screen and (max-width: 790px)
      width: 100% !important
  > .recharts-wrapper
    @media screen and (max-width: 790px)
      display: flex;
      width: 50% !important
      svg
        flex: 1 1
  @media screen and (max-width: 931px)
    justify-content: center
  > div:first-child
    flex: 0 0 auto
  > p:last-child
    flex: 1 0 auto
    text-align: center
    text-indent: -12rem

.trend-container
  display: flex
  justify-content: center
  flex-wrap: wrap
  > div
    flex: 1 1
    min-width: 300px

pre
  width: 100%
  text-align: center

.fade-line
  opacity: .6
