$label-color: #99a0a9 !default
$md-situation-background: none !default
$md-situation-happy-active-color: green !default
$md-situation-happy-inactive-color: white !default
$md-situation-undefined-active-color: white !default
$md-situation-undefined-inactive-color: #ccc !default
$md-situation-neutral-active-color: orange !default
$md-situation-neutral-inactive-color: white !default
$md-situation-sad-active-color: red !default
$md-situation-sad-inactive-color: white !default

md-situation
  .label
    display: block
    position: relative
    text-align: left
    font-weight: normal
    font-style: normal
    font-size: 0.85em
    left: -0.5em
    color: $label-color
    background: $md-situation-background

  .situation_emotions
    display: flex
    flex-wrap: nowrap
    min-width: 13em

  .situation_label
    margin-left: 10px

  .situation_content
    display: flex
    align-items: center
    justify-content: left
    background-color: $md-situation-background
    padding: 5px
    border-radius: 3px
    cursor: pointer

  .situation_emotion
    font-size: 2.0em
    margin-right: 0.1em
    margin-top: 0.25em
    margin-bottom: 0.25em
    margin-left: 0em
    color: $md-situation-undefined-inactive-color
    background: $md-situation-background
    border-radius: 0.4em
    padding: 5px
    &.situation_active
      //

    &.icon-special-char-questionmark
      &.situation_active
        color: $md-situation-undefined-active-color
        background: $md-situation-undefined-inactive-color

    &.situation_emotion_sad
      &.situation_active
        color: $md-situation-sad-inactive-color
        background: $md-situation-sad-active-color

    &.situation_emotion_neutral
      &.situation_active
        color: $md-situation-neutral-inactive-color
        background: $md-situation-neutral-active-color

    &.situation_emotion_happy
      &.situation_active
        color: $md-situation-happy-inactive-color
        background: $md-situation-happy-active-color