.grid .label-row
  height: $env-grid-header-height

.label-row
  position: fixed
  top: 0
  width: calc(100% - (#{$sidemenu-width} + (25% - #{$sidemenu-width / 4})))
  min-width: 561px
  z-index: 5
  background: none
  white-space: nowrap
  left: calc(#{$sidemenu-width} + (25% - #{$sidemenu-width / 4}))

  @media screen and (max-width: $min-width)
    left: 500px

  .cols
    width: 100%
    height: 100%

  .label-cell
    box-sizing: border-box
    display: inline-block
    width: calc(33.33% - 0.25px)
    height: 100%
    border-right: 1px solid rgba(#000, 0.1)
    position: relative

    +safari-only
      top: 0

    &:first-of-type
      width: calc(33.33% + 1px)

    &:last-of-type
      border-right: none
      // width: calc(33.33% - 1px)

    label
      color: #fff
      font-family: $condensed-font
      font-weight: 400
      font-size: 16px
      text-align: center
      text-transform: uppercase
      display: inline-block
      position: relative
      top: 12px
      width: 100%
      z-index: 1

      +safari-only
        +retina
          font-weight: 400
        +non-retina
          font-weight: 600

      small
        font-weight: 300
        color: rgba(#fff, 0.5)

    &.locked
      top: 0

    .img-locked
      margin-right: 12px
      line-height: 0
      position: relative
      opacity: 0.25
      position: absolute

    &.env-development
      &, .actions-menu
        background: darken($darker-blue, 3.5%)

    &.env-staging
      &, .actions-menu
        background: lighten($darker-blue, 3.5%)

    &.env-production
      &, .actions-menu
        background: $dark-blue

      label > strong
        margin-left: 20px

    .open-subenvs, .close-subenvs
      position: absolute
      left: 0
      top: 0
      width: 45px
      height: 100%
      text-align: center
      border-right: 1px solid rgba(#000, 0.1)
      z-index: 2
      cursor: pointer
      background: rgba(#fff, 0.0)
      transition: background 0.1s

      img, i
        color: #fff
        position: absolute
        top: 48%
        left: 53%
        transform: translate(-50%, -50%)
        opacity: 0.85
        transition: opacity 0.1s

      img
        width: 26px

      i
        font-size: 22px
        top: 45%

      &:hover
        background: rgba(#fff, 0.1)
        img, i
          opacity: 1

    .toggle-menu
      display: block
      position: absolute
      z-index: 2
      width: 45px
      border-left: 1px solid rgba(#000, 0.1)
      height: 100%
      text-align: center
      top: 0
      right: 0
      background: rgba(#fff, 0.0)
      transition: background 0.1s
      cursor: pointer

      i
        cursor: pointer
        color: #fff
        font-size: 25px
        opacity: 0.85
        transition: opacity 0.1s

      &:hover
        background: rgba(#fff, 0.1)
        img, i
          opacity: 1

    &.menu-open .toggle-menu
      background: $light-blue
      i
        opacity: 1

    .actions-menu
      opacity: 0
      transition: opacity 0.1s
      pointer-events: none
      position: absolute
      top: 100%
      width: calc(100% - 1px)

      border-bottom: 1px solid hsl(0,0,95)
      border-left: 1px solid hsl(0,0,95)
      border-right: 1px solid hsl(0,0,95)

      box-shadow: 0 0 1px rgba(#000,0.25)

      li
        background: rgba(#000, 0.25)
        padding: 12px
        color: rgba(#fff, 0.9)
        font-family: $condensed-font
        font-size: 14px
        font-weight: 400
        cursor: pointer
        text-transform: uppercase

        &:not(:last-of-type)
          border-bottom: 1px solid rgba(#fff, 0.5)

        &:hover
          background: rgba(#000, 0.35)
          color: rgba(#fff, 1)


    &.menu-open .actions-menu
      opacity: 1
      pointer-events: all

.editing-multiline .label-row
  .label-cell
    width: 100%

  .toggle-menu, .open-subenvs
    display: none


// .app-role-development .label-row
//   .label-cell
//     width: 33.33%