//_environment-info
.ui.inverted.menu
  .environment.item
    &.staging, &.development, &.test, &.alpaga
      background-color: #A5673F !important
      border-color: #A5673F !important
      color: #FFFFFF !important
    &.production, &.cambrinus
      background-color: #21BA45 !important
      border-color: #21BA45 !important
      color: #FFFFFF !important

// inspired by http://www.cssportal.com/css-ribbon-generator/
.environment-ribbon
  position: fixed
  left: -10px
  bottom: 0
  z-index: 1
  overflow: hidden
  width: 75px
  height: 75px
  text-align: right
  &.top-right
    margin-top: 45px
    left: auto
    right: -5px
    top: -5px

  span
    font-size: 8px
    font-weight: bold
    text-transform: uppercase
    text-align: center
    line-height: 20px
    transform: rotate(45deg)
    -webkit-transform: rotate(45deg)
    width: 100px
    display: block
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1)
    position: absolute
    top: 19px
    right: -21px

    &::before
      content: ""
      position: absolute
      left: 0px
      top: 100%
      z-index: -1

    &::after
      content: ""
      position: absolute
      right: 0px
      top: 100%
      z-index: -1
      border-left: 3px solid transparent
      border-bottom: 3px solid transparent
  &.development
    +env-ribbon(#1e5799)
  &.production
    +env-ribbon(#808080)
    display: none
  &.test
    +env-ribbon(#66ff66)
    display: none
  &.staging
    +env-ribbon(#8F5408)
