/* FIXME should be in vl-ui*/
$pill-radius: 3px;
$pill-height: 22px;
$pill-min-width: 150px;
$text-color: #212121;

.shelf-group{
  border: 1px solid #ddd;
  border-radius: $pill-radius;
  margin-bottom: 4px;
  font-size: 11px;
}

.shelf.disabled {
  opacity: 0.5;
}

/** Don't disable shelf in preview mode */
.preview .shelf.disabled {
  opacity: 1;
}

.shelf{
  border-radius: $pill-radius;
  background-color: hsla(224,25%,29%,0.2);
  width: 100%;
  display: flex;
  height: 22px;

  &.any {
    background-color: hsla(185,80%,29%,0.4);
  }

  .shelf-label {
    @extend .noselect;
    display: block;
    width: 45px;
    margin: 0 0.2rem;
    // text-align: right;
    line-height: $pill-height;
    // cursor: pointer;
    flex-shrink: 0;

    .fa {
      margin-top: 4px;
      opacity: 0.5;
    }
    &.expanded .fa, &:hover .fa {
      opacity: 1;
    }
  }

  .field-drop {
    display: flex;
    flex-grow: 1;
    width: auto;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 3px;
    height: $pill-height;
    line-height: $pill-height;

    .field-info {
      margin-right: 0;
    }

    .placeholder {
      display: block;
      width: 100%;
      padding: 0 0.5em;
      border: 1px solid hsla(0,0%,30%,0.1);
      background-color: white;
      line-height: $pill-height - 2;
      border-radius: $pill-radius;
      text-overflow: ellipsis;
      font-weight: normal;
      color: #ccc;
    }
  }

  .field-drop.drop-active {
    border: 1px dashed #4CAF50;

    background-color: #C8E6C9;
    .placeholder {
      background-color: #C8E6C9;
      color: $text-color;
    }
    .field-info {
      opacity: 0.5;
    }
  }
}

.shelf-properties {
  min-width: 250px;
}

.shelf-functions {
  max-width: 280px;
}

.shelf-properties, .shelf-functions{
  line-height: 20px;

  label {
    display: inline-block;

    &.prop-label {
      width: 110px;
      text-align: right;
      margin-right: 3px;
      .name {
        text-overflow: ellipsis;
        width: 90px;
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
      }
    }

    &.func-label, &.type-label {
      min-width: 75px;
      margin-right: 5px;
    }
  }
}