.data-node{
  &:empty{
    display: none;
  }
  .header{
    min-height: 35px;
    box-sizing: content-box;
  }
  .label-icon{
    margin-right: 3px;
  }

  .add-value-row{
    background: rgb(231, 231, 231);
  }

  .ql-editor{
    background: white;
  }

  .field{
    &.text{
      padding: 10px;
      box-sizing: border-box;
    }
    &.object{

      >div{
        padding: 4px 7px;
      }
      >div:nth-child(even){
        background: rgb(250, 250, 250);
      }
    }
    &.array{
      >div>.array-cont>div>.array{
        margin: 10px;
      }
    }
    &.media{
      padding: 10px;

      .empty{
        text-align: center;
        cursor: pointer;

        .intro{
          color: color-primary;
          font-weight: bold;
          font-size: 18px;
        }
        .description{
          margin-bottom: 15px;
        }

        md-icon{
          margin-top: 5px;
          color: color-primary;
          width: 50px;
          height: 50px;
        }

      }
    }
  }
  .media-value{
    min-height: 138px;

    .thumbnail{
      margin-right: 14px;
      width: 152px;
      border-radius: 4px;
      background-position: center;
      background-size: cover;

      md-icon{
        width: 60%;
        height: 60%;
        color: color-primary;
      }
    }
    .title{
      font-size: 16px;
      color: #545454;
    }
  }
}

.data-field{

  div[data-as-sortable]{
    position: relative;
  }

  .data-node{
    position: relative;

    .array{
      box-shadow: 0px 1px 3px grey;
      border-top: none;
    }

    [data-as-sortable-item-handle]{
      font-weight: bold;
    }

    .excerpt{
      overflow: hidden;
      span{
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100%;
        overflow: hidden;
      }
    }

    .highlight{
      border-bottom: solid 2px #bdbdbd;
      color: #535353;
      background: rgb(251, 250, 250);
      padding: 8px;

      >label{
        font-weight: bold;
        margin-right: 4px;
        width: 200px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      md-icon{
        cursor: pointer;
      }
    }

    .expander{
      transition: transform 400ms;
      box-shadow: none !important;
    }
    &.contracted{
      .array-cont{
        display: none;
      }

      .expander{
        transform: rotateZ(180deg);
      }
    }

    .data-node{

      .index{
        display: block;
        text-align: center;
        line-height: 26px;
        color: color-primary;
        border-radius: 100%;
        font-size: 25px;
        padding: 4px;
        content: '';
      }

      [data-as-sortable-item-handle]{
        font-weight: normal;
      }
    }

    >.index{
      display: none;
    }
  }
}