.env-grid
  .cell
    box-sizing: border-box
    transition: box-shadow 0.1s linear, background 0.3s ease-out
    border: 1px solid rgba(#fff, 0.0)
    position: relative
    box-sizing: border-box
    overflow: hidden
    // padding: 0 15px

    &, span, input, textarea
      font-family: $code-font

    &:hover, &:last-of-type:hover
      +cell-glow($light-blue)

      &.locked
        +cell-glow(hsl(0,0,75))

    > div
      width: 100%
      height: 100%

    .val, .small-loader
      display: block
      position: relative
      top: 50%
      transform: translateY(-50%)

    .val
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
      line-height: 110%

    &.val-cell
      .small-loader
        position: absolute
        left: 10px
      &:hover .small-loader
        left: 40px

      .val
        margin: 1px 15px

      &.locked
        cursor: not-allowed
        .val
          overflow: visible

      .img-locked
        position: absolute
        left: 4px
        top: calc(50% - 7.5px)

  .entry-col .cell
    border-bottom: 1px solid rgba(#000,0.1)
    box-sizing: border-box

    span
      transition: color 0.1s linear

    .small-loader
      margin-left: 10px

    &:last-of-type
      border-bottom: 1px solid #fff
      &:hover
        border-bottom: 1px solid rgba($light-blue, 0.6)
        &.locked
          border-bottom: 1px solid rgba(hsl(0,0,75), 0.6)

    &.var:hover, &.var:last-of-type:hover
      +cell-glow($light-blue)

    &, span, input, textarea
      font-size: 11.5px

    .val
      margin: 0 15px

  .val-cols .cell
    color: $dark-text
    border-bottom: 1px solid rgba(#000, 0.1)
    border-left: 1px solid rgba(#000, 0.1)
    text-align: center

    &.inherits
      color: $dark-blue

      small
        margin-right: 4px
        position: relative

      &, span, input, textarea
        font-size: 11.5px

    &:last-of-type
      border-bottom: 1px solid #fff
      &:hover
        border-bottom: 1px solid rgba($light-blue, 0.6)
        &.locked
          border-bottom: 1px solid rgba(hsl(0,0,75), 0.6)

    &, span, input, textarea
      font-size: 11px

  &.vals-masked .val-cols .cell
    color: hsl(0,0,75)

    &.inherits
      color: $dark-blue

  .cell
    input, textarea
      outline: none
      border: none
      display: inline-block
      width: 100%
      height: 100%
      box-sizing: border-box
      box-shadow: none
      border-radius: 0px
      background: none
      color: $dark-text
      text-align: center

      &::selection
        background: rgba($light-blue, 0.4)

    textarea
      resize: none
      padding-top: 12px

    &.multiline
      transition: background 0s

      &.editing
        position: fixed
        background: #fff
        z-index: 5
        top: $env-grid-header-height
        left: calc(#{$sidemenu-width} + 25% - #{($sidebar-width + $app-tab-width) / 4})
        width: calc(100% - (#{$sidemenu-width} + 25% - #{($sidebar-width + $app-tab-width) / 4} ))
        height: calc(100% - #{$env-grid-header-height})

      textarea
        text-align: left
        padding-top: 8px
        line-height: 1.4

    span.mask-dots
      color: lighten($dark-text, 25%)

  .entry-form .cell.multiline.editing
    top: $env-grid-header-height
    height: calc(100% - #{$env-grid-header-height})

  .cell.entry-cell
    input, textarea
      text-align: left
      padding-left: 15px

  .cell.editing
    overflow: visible

    .actions-overlay
      opacity: 0
      pointer-events: none

  .cell.editing, .cell.updating
    &, &:last-of-type, &:hover, &:last-of-type:hover
      +cell-glow($light-orange)

  .cell.deleted
    .actions-overlay
      .copy, .remove
        display: none

      .edit
        left: 0
        width: calc(100% - 5px)
        text-align: right

    .val > img
      opacity: 0.25
      width: 12px

  .cell.empty
    .val


  .cell .cell-contents
    position: relative
    transition: right 0.1s linear 0.05s
    width: 100%
    height: 100%
    right: 0

  .cell .confirm-action
    width: calc(100% - 15px)
    position: absolute
    top: 50%
    transform: translateY(-50%)
    left: 100%
    transition: left 0.1s linear
    visibility: hidden

  .cell.confirming
    overflow: hidden

    .cell-contents
      right: calc(100% + 10px)
      transition: right 0.1s linear

    .confirm-action
      visibility: visible
      left: 15px
      transition: left 0.1s linear 0.05s

    &.val-cell .confirm-action span
      left: 0


  .cell small
    font-family: $default-font
    font-weight: 400
    color: hsl(0,0,70)

    +safari-only
      color: hsl(0,0,70)

    em
      font-style: italic

    .optional
      margin-left: 5px
      font-size: 10px
      opacity: 0.9

  .highlight-row
    .entry-col, .val-cols
      .cell
        background: rgba($light-blue, 0.1)
        border-bottom: 1px solid transparent
        border-top: 1px solid rgba(#000,0.02)

  .cell .cell-contents .socket-entry-overlay
    padding-top: 14px

  .cell.socket-editing-entry-val
    &, &:hover
      border: none !important

.sub-env-grid
  .cell.multiline.editing
    left: calc(#{$sidemenu-width} + 50% - #{($sidebar-width + $app-tab-width) / 2})
    width: calc(100% - (#{$sidemenu-width} + 50% - #{($sidebar-width + $app-tab-width) / 2} ))

