/* ==========================================================================
   Entity block KMS
   ========================================================================== */

#entity
  position: absolute
  top: 0
  right: 0
  bottom: 0
  left: 380px
  border-left: 1px solid $lighter-gray


  /* Header + Save and Delete buttons
    ========================================================================== */
  .entity-header
    +flex(space-between, center)
    height: 140px
    position: relative
    padding-left: 40px
    padding-right: 20px
    box-shadow: inset 0px -20px 20px -20px rgba(0,0,0,.5)

    // Group it for flex-box
    .entity-header-attributes
      width: calc(100% - 200px)
      +flex(flex-start, center)

      .entity-thumbnail
        position: relative
        width: 100px
        height: 100px
        overflow: hidden
        border: solid 1px white
        border-radius: 10px
        background-color: $lightGray

        line-height: 100px
        text-align: center
        font-size: 1.6rem
        font-weight: bold
        color: $gray

        img
          width: 100%
          height: 100%
          object-fit: contain

        &:after
          content: ""
          position: absolute
          display: block
          width: 100%
          height: 100%
          top: 0
          left: 0
          z-index: 5
          background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%)

      h2
        display: block
        width: calc(100% - 100px)
        padding-left: 40px
        font-size: 1.2rem
        color: white

    // Entity Save and delete buttons
    .entity-buttons
      width: 200px

      .save, .trash
        display: inline-block
        vertical-align: top
        height: 40px
        border-radius: 4px
        appearance: none
        border: none
        cursor: pointer
        transition: background-color 0.3s
        &:focus
          outline: none

      .save
        width: 150px
        background-color: $blue
        color: white
        font-size: 0.7rem

        &.disabled
          pointer-events: none
          background-color: lighten($darkerBlue, 10%)
          color: rgba(white, 0.3)


        &:hover
          background-color: darken($blue, 10%)


      .trash
        width: 40px
        background-color: $brightRed
        background-image: url("#{$baseImagePath}/icons/icon_trash.svg")
        background-repeat: no-repeat
        background-position: 50% 50%
        background-size: 16px 16px

        &:hover
          background-color: darken($brightRed, 15%)

  /* (Language) Tabs
    ========================================================================== */
  .entity-tabs
    width: 100%
    height: 50px
    padding-left: 40px
    background-color: lighten($darkerBlue, 5%)

    ul
      +flex(flex-start, flex-end)
      margin: 0
      padding: 0
      list-style: none
      height: 100%

      li
        background-color: lighten($darkerBlue, 15%)
        margin: 0 5px
        height: 35px
        line-height: 40px
        border-radius: 4px 4px 0 0
        transition: background-color 0.3s, box-shadow 0.3s

        a
          display: block
          height: 100%
          width: 100%
          color: white
          font-size: 0.7rem
          text-decoration: none
          text-transform: uppercase
          padding: 0 20px

        &:hover
          background-color: lighten($darkerBlue, 10%)

        &.active
          background-color: #f9f9f9
          a
            color: $blue

        &.error
          background-color: $brightRed

  /* Container for attributes
    ========================================================================== */
  .entity-attributes
    position: absolute
    top: 190px
    bottom: 0
    width: 100%
    overflow: auto
    background-color: #f9f9f9

    .contentBlockAddButton //TODO: STYLE THIS PROPERLY
      text-align: center
      width: 33%
      display: inline-block
      cursor: pointer
      img
        display: block
        margin: 0 auto
        pointer-events: none
      label
        position: static
        display: inline
        margin-left: auto
        font-size: 0.8rem
        color: #9ba0ae
        text-transform: uppercase
        font-weight: 300
        white-space: nowrap
        pointer-events: none

  .tab-content, .sub-tab-content
    display: none

    &.active
      display: block

  &.full-width
    left: 0
    color: $blue

    .tab-content
      padding-bottom: 60px


// TODO Discussion with Mike if we want this functionality for KMS
// else it will be also moved to an own attribute block #badTim
.fieldGroupCollection
  ul
    list-style: none
    margin: 0
    padding: 0
    li
      list-style: none
      position: relative
      padding-left: 25px
    &.fieldGroupItems

      li
        &:before
          content: ''
          display: inline-block
          height: 25px
          width: 35px
          background-image: url("#{$baseImagePath}/icons/drag.png")
          background-size: contain
          background-repeat: no-repeat
          position: absolute
          left: 20px
          top: 17px