@import '../../imports';

$overflow-width: 40px;

.filter-tile {
  @extend %module;
  @extend %module-h-title;

  .drag-mask {
    @include pin-full;
  }

  .items {
    @include unpin-left($bar-title-width);
    transition: height 0.1s ease-in-out;
    overflow: hidden;

    .filter {
      @extend %dimension-item;
      @extend %dimension-item-h;
      position: absolute;
      left: 0; // It gets horizontal position from the JS

      &.from-highlight {
        border: 1px dashed $highlight-border;
        background: rgba($item-categorical, 0.5);

        &.type-time,
        &.type-number {
          border: 1px dashed hsl(130, 39%, 44%);
          background: rgba($item-continuous, 0.5);
        }
      }
    }
  }

  .overflow {
    @extend %dimension-item;
    @extend %dimension-item-h;
    position: absolute;
    left: 0;
    padding: 0 10px;
    width: 40px;

    &.all-continuous {
      background: $item-continuous;
    }

    .count {
      pointer-events: none;
      white-space: nowrap;
      height: 16px;
      margin-top: 7px;
    }
  }

  .fancy-drag-indicator {
    @include unpin-left($bar-title-width);
  }
}

.overflow-menu {
  .filter {
    @extend %dimension-item;
    position: absolute;
    left: 8px;
    top: 0; // It gets vertical position from the JS
    height: 29px;

    &.from-highlight {
      border: 1px dashed $highlight-border;
      background: rgba($item-categorical, 0.5);

      &.type-time,
      &.type-number {
        border: 1px dashed hsl(130, 39%, 44%);
        background: rgba($item-continuous, 0.5);
      }
    }
  }
}