@import 'editor/scss/variables';

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

  &--header {
    cursor: default;

    &.drag-over {
      box-shadow: inset 0 0 0 2px $color-black-offset-2;
    }

    &.hover {
      box-shadow: inset 0 0 0 2px $color-blue-3;
    }

    & 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;
    }

    &.selected {
      background-color: $color-blue-3;
    }

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

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

  &--expand-button {
    color: $color-white-offset-3 !important;
    cursor: pointer;
    display: inline-block;
    position: relative;
    top: 1px;
    width: 6px;
    &.expanded {
    }
  }

  &--drop-target {

    &-line {
      width: 100%;
      height: 2px;
      background-color: $color-black-offset-2;
    }

    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;
    }
  }
}