.entity-attributes

  +position(absolute, grid-row(8) null 0 null)
  width: 100%
  overflow: auto
  background-color: $white

  .entity-attribute
    position: relative
    height: grid-row(2)
    border-bottom: 1px solid #e0e6ec
    line-height: grid-row(2)
    +box-sizing(border-box)

    .entity-attribute-right
      display: block
      +size(100% 100%)
      +box-sizing(border-box)
      background-color: transparent
      padding-left: 205px
      padding-top: grid-row(.5)
      padding-bottom: grid-row(.5)
      border: none
      line-height: grid-row(1)

  .entity-attribute-separator
    height: grid-row(1)
    background-color: $dark-white
    -webkit-box-shadow: inset 0px 15px 15px -15px rgba($black,.15)
    -moz-box-shadow: inset 0px 15px 15px -15px rgba($black,.15)
    box-shadow: inset 0px 15px 15px -15px rgba($black,.15)

  .entity-attribute-title
    text-indent: grid-row(1)
    color: $brand-primary
    font-weight: $font-weight-bold
    text-transform: uppercase

  .entity-attribute-text, .entity-attribute-password
    padding: 0
    +box-sizing(border-box)

    &.error + .error
      box-shadow: inset 0 1px 1px rgba($brand-danger, .075), inset 0 0 1px rgba(lighten(desaturate($brand-danger, 25%), 10%),.75)
      border: 1px solid $brand-danger
      border-top: 0

    &.error
      border: 1px solid $brand-danger
      label
        color: $brand-danger

    label
      position: absolute
      display: block
      width: 175px
      margin-left: grid-row(1)
      font-size: $font-size-small
      color: $light-gray
      text-transform: uppercase
      font-weight: $font-weight-bold

    input
      +size(100% 100%)
      background-color: transparent
      text-indent: 205px
      border: 0
      z-index: 99999
      display: block
      +box-sizing(border-box)
      +attribute-focus

    &.error input
      background-image: url('../img/structure/icon_cross_red.svg')
      background-repeat: no-repeat
      background-position: right 20px center
      background-size: 10px 10px

  .entity-attribute-select
    label
      position: absolute
      display: block
      width: 175px
      margin-left: grid-row(1)
      font-size: $font-size-small
      color: $light-gray
      text-transform: uppercase
      font-weight: $font-weight-bold

    .ui-select-container
      position: relative
      margin-left: 200px
      margin-right: 10px

  .entity-attribute-text-editor
    height: grid-row(9)
    padding: 0
    position: relative

    label
      position: absolute
      display: block
      width: 175px
      margin-left: grid-row(1)
      font-size: $font-size-small
      color: $light-gray
      text-transform: uppercase
      font-weight: $font-weight-bold

    .text-editor-wrapper
      margin-left: 197px
      height: 100%

    textarea
      display: block
      +box-sizing(border-box)
      padding-top: grid-row(.5)
      padding-bottom: grid-row(.5)
      border: none
      line-height: grid-row(1)
      +attribute-focus

  .entity-attribute-text-area
    height: grid-row(6)
    padding: 0

    label
      position: absolute
      display: block
      width: 175px
      margin-left: grid-row(1)
      font-size: $font-size-small
      color: $light-gray
      text-transform: uppercase
      font-weight: $font-weight-bold

    textarea
      display: block
      +size(100% 100%)
      +box-sizing(border-box)
      background-color: transparent
      padding-left: 205px
      padding-top: grid-row(.5)
      padding-bottom: grid-row(.5)
      border: none
      line-height: grid-row(1)
      +attribute-focus

  .entity-attribute-on-off
    padding: 0
    +box-sizing(border-box)
    line-height: grid-row(2)

    label
      display: inline-block
      width: 175px
      margin-left: grid-row(1)
      font-size: $font-size-small
      color: $light-gray
      text-transform: uppercase
      font-weight: $font-weight-bold

    input
      display: inline-block
      margin-top: grid-row(.5)
      margin-bottom: grid-row(.5)