.env-header
  box-sizing: border-box
  padding: 0 0
  background: $dark-bg-gradient
  height: $app-tab-height / 2

  button.split-strong
    float: left
    width: 12.5%
    height: 100%
    box-sizing: border-box
    border-radius: 0
    color: $light-orange
    background: hsla(0,0,28,0)
    border-right: 1px solid rgba(#fff, 0.15)
    transition: background 0.15s ease-out
    position: relative
    outline: none

    &:hover
      background: hsl(0,0,10)

    &:first-of-type
      margin: 0

    &.add-var.selected
      font-size: 16px
      background: hsl(0,0,15)
      &:hover
        background: #000

    &.show-hide-toggle
      color: $lighter-blue

  .show-hide
    position: absolute
    top: 0
    padding: 9px 12px
    right: 75%
    font-size: 11px
    font-weight: 400
    text-transform: uppercase
    font-family: $condensed-font
    border-left: 1px solid rgba(#fff, 0.1)
    transition: background 0.15s ease-out
    color: #fff

    @media all and (max-width: $min-width)
      left: 104px
      right: auto

    &:hover
      background: rgba(#000,0.25)

    input, textarea
      margin-right: 10px
      float: left
      position: relative
      top: 2px

    img
      width: 23px
      transition: opacity 0.15s ease-out
      opacity: 0.4
      position: relative
      top: 1px

    &, *
      cursor: pointer

  .title-cell
    label
      color: #fff
      text-align: left
      box-sizing: border-box
      padding: 0 15px
      text-transform: none
      font-family: $default-font
      font-weight: 400
      font-size: 13px
      position: relative
      top: 10px
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
      width: calc(100% - 65px)
      line-height: 16px

      +safari-only
        top: 9px
        font-weight: 400

  .updating-env-msg
    position: absolute
    top: 0
    height: 100%
    opacity: 0
    pointer-events: none
    transition: opacity 0.4s ease-out
    display: block
    padding-left: 50px
    box-sizing: border-box
    width: 25%
    background: lighten($dark-bg, 4%)

    > span
      color: rgba(#fff, 0.9)
      font-family: $condensed-font
      text-transform: uppercase
      font-weight: 400
      font-size: 12px
      position: relative
      top: 9px

    .broadcast-loader
      position: absolute
      top: 8px
      left: 20px
      opacity: 0.8

      > svg
        width: 18px
        height: 18px

        circle, path
          fill: $light-orange

.updating-env
  .updating-env-msg
    opacity: 1
    transition: opacity 0.1s ease-out
    pointer-events: default

  .show-hide
    opacity: 0

.hide-values .env-header
  .show-hide img
    opacity: 1

.has-no-val .label-cell.title-cell label
  width: 100%

// .app-role-development .env-header
  // .show-hide
    // right: 66.66%
    // @media all and (max-width: $min-width)
      // left: 186px
      // right: auto

  // .updating-env-msg
    // width: 33.33%
