@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"

#goals-view
  position: absolute
  left: 10px
  top: -100px
  @include transition(0.5s ease-in-out)
  background-color: rgba(200,200,200,1.0)
  
  border: black
  padding: 15px 7px 2px 5px
  box-sizing: border-box
  border: 1px solid #333
  border-radius: 5px
  z-index: 3
  font-size: 14px

  &.brighter
    font-size: 18px
    font-size: 1.4vw
    @include box-shadow(0px 0px 12px white)

  .goals-status
    margin: 0
    color: black

    .success
      color: darkgreen
    .timed-out
      color: darkslategray
    .failure
      color: darkred
    .incomplete
      color: darkgoldenrod
    
  ul
    padding-left: 0
    margin-bottom: 0
    color: black
    
  li
    list-style: none
    margin-right: 5px
    i
      margin-right: 5px
      
  li.status-incomplete
    color: #333
    
  li.status-failure
    color: darkred
    
  li.status-success
    color: darkgreen
    
#goals-view.collapsed i.collapsed, #goals-view.expanded i.expanded
  display: none

#goals-view.collapsed ul
  display: none