@import '../../stylesheets/mixins/common.styl'

$inset-shadow = inset 0 1px 2px alpha(black, 0.09)

+host-styles('mp-property-values-screen')
  display inline-flex

+prefix-classes('pvs-')
  .container
    border-radius 5px
    display flex
    flex-direction column
    min-height 320px
    overflow hidden
    width 320px

    input[type='number']::-webkit-outer-spin-button, input[type='number']::-webkit-inner-spin-button // @stylint ignore
      appearance none
      margin 0

    .title-section
      align-items center
      box-shadow 0 1px 3px 0 rgba(156, 172, 187, 0.37), 0 1px 0 0 $grey-150
      display flex
      flex none
      height 48px
      justify-content center
      position relative

      .back-button
        display inline-flex
        left 0
        padding 0 10px
        position absolute
        svg-icon-style($grey-700)

        &:hover
          cursor pointer
          svg-icon-style(mp-control-primary-color())

      .property-type-container
        .property-type-button
          align-items center
          color mp-secondary-text-color()
          display flex
          font-size-xs()
          font-weight $weight-bold
          justify-content center

          &:hover
            color mp-control-primary-color()
            cursor pointer
            svg-icon-style(mp-control-primary-color())

          svg-icon-style(mp-secondary-text-color())

          .property-type-label
            margin-left 5px

        .property-types-menu
          position relative

          mp-drop-menu
            left 50%
            margin-top 10px
            position absolute
            transform translateX(-50%)

    .filter-section
      display flex
      flex 1
      flex-direction column
      padding 10px 15px

      .filter-fixed-subsection
        border-top 1px solid $grey-150
        display flex
        flex 0 0 auto
        padding 12px 0

        &:first-child
          border 0
          padding-top 0

        .filter-operator-dropdown
          flex 1
          // z-index 0 // fix z-index issue between operator dropdown and calendar

        &.filter-numdate-between
          align-items stretch

        .filter-numdate-input, .filter-string-input
          border 1px solid mp-dark-divider-color()
          border-radius 3px
          box-shadow $inset-shadow
          color mp-primary-text-color()
          flex 1
          font-family $family-helvetica
          font-size-default()
          min-width 0
          padding 10px 8px
          transition border-color $transition-speed

          &:focus
            border-color mp-control-primary-color()
            outline 0

        mp-icon-input
          flex 1

        &.filter-radio-list
          justify-content center
          margin-top 12px

          mp-radio-button
            cursor pointer

          .radio-button-container
            display flex
            margin-left 30px

            &:first-child
              margin-left 0

        .filter-conjunction
          align-items center
          background-color $grey-100
          border-radius 3px
          color mp-secondary-text-color()
          display inline-flex
          font-size-xs()
          font-weight $weight-bold
          justify-content center
          margin 0 10px
          padding 0 10px

      .filter-property-values-loading
        align-items center
        display flex
        flex 1
        justify-content center

        mp-spinner
          height 30px
          width 30px

      .filter-property-values
        display flex
        flex 1
        flex-direction column
        // TODO(mack): This is a bit of a hack to make mp-items-menu wider, because the mp-items-menu internally
        // has padding. This padding within mp-items-menu should be removed.
        margin 0 -10px
        max-height 236px
        overflow auto

    &.display-context-custom-event
      .filter-section
        .filter-property-values
          max-height 185px