@import './event-selector-block.styl'

$add-button-focus-color = alpha(#6E859D, 0.8)

.mp-custom-event-builder
  max-height 400px
  min-height 350px
  overflow-y auto

  .add-event-button-container
    align-items center
    display flex
    flex 1
    margin-top 20px

    .add-event-button
      background-image linear-gradient(0deg, $grey-50 0, $white 100%)
      border 1px solid $grey-300
      border-radius 50%
      box-shadow 0 1px 1px 0 alpha(black, 0.2)
      cursor pointer
      height 28px
      margin-left 2px
      padding 0
      svg-icon-style($grey-700, $mp-blue, size: 22px)
      width 28px

      svg-icon
        margin 2px

        svg
          transform rotateZ(-45deg)

      &:hover
        background-image linear-gradient(0deg, $white 0, $white 100%)
        box-shadow 0 1px 2px 0 alpha(black, 0.23)

      &:active
        border-color $grey-200
        box-shadow 0 1px 0 0 $grey-150, inset 0 2px 3px 0 $grey-200
        svg-icon-style($add-button-focus-color)

      &.add-event-button-container-disabled
        opacity 0.6
        pointer-events none
        svg-icon-style($grey-700, $grey-700)

  .event-selector-block
    margin 10px 0

    &:first-child
      margin-top 0

    mp-custom-event-builder-event-selector
      background-color $white
      border 2px solid transparent
      border-radius 6px
      box-shadow 0 1px 4px 0 alpha(black, 0.1)
      display block
      position relative

    // required because Firefox & Safari do not encapsulate styles
    mp-autoresizing-input
    .autoresizing-input-input-container
      height 24px
      margin-top -3px

      input
        align-items center
        border 0
        border-radius 0
        box-shadow none
        color $blue-500
        display flex
        font-size-large()
        font-weight $weight-medium
        height 100%
        line-height 28px
        margin-right -1px
        padding 0