$input-animation-time = 0.25s
$input-width = 160px

.mp-event-selector-wrapper
  display inline-flex
  padding 12px 26px 9px

  .selector-section
    align-items center
    display flex
    flex-wrap wrap

    .event-clickable, .property-filter
      border-bottom dotted 1px mp-control-label-text-color()
      color mp-control-label-text-color()
      cursor pointer
      display inline-block
      font-size-large()
      height 32px
      justify-content center
      line-height 20px
      margin 0 6px 10px 0
      min-width 12px
      padding 6px 0 5px
      position relative

      &:hover
        border-bottom-style solid

      span
        // space character required to maintain consistent spacing on edit
        &:not(:first-child)::before
          content ' '

        &:last-child
          padding-right 4px

    .event-clickable
      span
        margin-right 4px

    .event-builder-container, .property-filter-builder-container
      bottom 0
      left 0
      position absolute

    .property-filter-separator-label
      align-self flex-start
      font-size-large()
      line-height 20px
      margin-right 8px
      padding 6px 0

      &.where-label
        margin-left 0

    .property-filter
      border-bottom-color $grey-500
      display flex
      height 32px
      line-height 20px
      margin-right 6px
      position relative

      &:hover
        border-bottom-color mp-control-label-text-color()
        span.property-filter-label-part
          color mp-control-label-text-color()

        .property-filter-remove
          opacity 1

      .property-filter-label-part
        color $grey-500

        &.highlight
          color $grey-700

      .property-filter-remove
        background transparent
        border-width 0
        opacity 0
        padding 0
        position absolute
        right -4px
        svg-icon-style($grey-700, $mp-red, size: 16px)
        top -8px

  .property-filter-add-section
    align-items flex-end
    align-self flex-start
    display flex
    margin-left 8px
    position relative

    .property-filter-search-icon-wrapper
      align-items center
      bottom 0
      display flex
      height 32px
      justify-content center
      position absolute
      svg-icon-style($grey-700, size: 18px)

    input.property-filter-search-input
      border 0
      border-bottom 1px dotted mp-control-label-text-color()
      border-radius 0
      box-shadow none
      font-size-medium()
      height 32px
      padding 8px 0 8px 2px
      text-indent 20px
      width $input-width

      &.property-filter-search-active
        margin-right 10px

      &:focus
        border 0
        border-bottom 1px solid mp-control-label-text-color()

  .selector-remove
    cursor pointer
    height 30px
    padding 5px
    position absolute
    right 0
    svg-icon-style($grey-500, $mp-red)
    top 0

  /**
    * Input animation
    */

  .property-filter-filter-button
    transform translate3d(-($input-width), 0, 0)
    transition transform $input-animation-time $ease-out-quart

  .property-filter-add-section
    &:not(.property-filter-pane-open)
      .property-filter-search-input, .property-filter-search-icon-wrapper
        pointer-events none
        visibility hidden

    &.property-filter-pane-open
      .property-filter-filter-button
        transform translate3d(0, 0, 0)