@import "variables";

@keyframes propertySelected {
  0% {
    background: $lightgrey;
  }
  50% {
    background: $input-focus-color;
    color: $white;
  }
  100% {
    background: $lightgrey;
  }
}

.property-selector {
  table {
    border-spacing: 0;

    .category-field, .selected-field {
      background: $lightgrey;
      padding: 3px;
      margin-top: 5px;
      position: relative;
      font-weight: normal;
      min-height: 15px;
      text-shadow: none;
    }

    .category-field {
      span.plus {
        background: url('[{$dirs.images}]icons/silk/add.png');
        width: 16px;
        height: 16px;
        position: absolute;
        top: 3px;
        right: 3px;
        cursor: pointer;
      }
    }

    .draggable .selected-field {
      cursor: ns-resize;
    }

    .selected-field {

      &.selected-field-focus {
        animation: propertySelected 3s infinite;
      }

      div {
        padding: 2px;
        position: relative;
      }

      span.minus {
        background: url('[{$dirs.images}]icons/silk/delete.png');
        width: 16px;
        height: 16px;
        position: absolute;
        top: 3px;
        right: 3px;
        cursor: pointer;
      }
    }

    .reference {
      background: url('[{$dirs.images}]icons/silk/zoom.png');
      width: 16px;
      height: 16px;
      position: absolute;
      top: 3px;
      right: 18px;
      cursor: pointer;
    }

    .property-remover {
      background: url('[{$dirs.images}]icons/silk/cross.png') no-repeat;
      width: 16px;
      height: 16px;
      position: relative;
      cursor: pointer;
      padding: 0px 16px;
      margin-top: 5px;
      font-weight: normal;
    }
  }
}
