@import '@tandem/editor/browser/scss/variables';

.m-layers-pane-component-layer {
  position: relative;

  @import "./layer-input.scss";

  &--header {
    cursor: default;
    white-space: nowrap;

    &.drag-over, &.hover {
      box-shadow: inset 0 0 0 2px $color-sky-blue-4;
    }

    & i {
      //margin-right: $padding-0;
      float: left;
    }

    // next sibling after icon. This is necessary
    // for things like input that need to add padding
    & i + * {
      margin-left: $padding-0;
    }

    display: block;
    padding: $padding-00 $padding-2;

    // &:hover {
    //   .m-layers-pane-component-layer--add-child-button {
    //     display: inline-block;
    //   }
    // }
  }


  &--add-child-button {
    cursor: pointer;
    position: absolute;
    display: none;
    right: 7px;
    float: right;
    color: $color-white-offset-3;
  }

  & .m-label {
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: normal;
    display: inline-block;
    -webkit-user-select: none;
    white-space: nowrap;
    width: calc(100% - 15px);
  }

  &--expand-button {
    cursor: pointer;
    display: inline-block;
    position: relative;
    top: 1px;
    width: 6px;
    &.expanded {
    }
  }

  &--drop-target {

    &-line {
      width: 100%;
      height: 2px;
      background-color: $color-sky-blue-4;
    }

    position:relative;
    top: -2px;
    width: 100%;
    margin: -2px;
    height: 4px;
    background-color: transparent;
  }
}

.m-layer-type {

  &-component {
    white-space: nowrap;
    color: $color-white-offset-8;
  }

  &-state {
    color: $color-pink-10;
    &:hover {
      background-color: $color-pink-2;
    }
  }
}