.data-node{

  &:empty{
    display: none;
  }
  &.readonly{
    mdp-date-picker, mdp-time-picker, input, select, md-input-container{
      opacity: 0.8;
      pointer-events: none;
    }
  }

  .header{
    min-height: 35px;
    box-sizing: content-box;
  }
  .label-icon{
    margin-right: 3px;
  }

  .add-value-row{
    margin: 20px 0;
  }

  .ql-editor{
    &.ql-blank{
      &:before{
        color: rgba(255, 255, 255, 0.6);
      }
    }
  }

  .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;
      }
    }
    &.relation-hasMany{
      .item{
        background: whitesmoke;
        padding: 10px;
        border-radius: 4px;
        cursor: pointer;
      }
    }
    &.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{
      border-radius: 4px;
      overflow: hidden;
      border: solid 1px #c5c5c5;
      padding: 4px 12px;
    }

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

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

    .highlight{
      color: #535353;
      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;
    }
  }
}