@import '../../stylesheets/defaults'
@import './custom-event-builder'

mp-modal.custom-event-modal
  font-family $family-helvetica
  font-weight $weight-medium
  max-width 1326px
  width calc(100% - 40px)

  .custom-event-modal-content
    display flex
    flex-direction column

  *
    box-sizing border-box

  input
    appearance none
    outline 0

  .mp-modal-header-container
    height 57px
    overflow hidden

    .mp-modal-header
      align-items center
      background $mp-blue
      border-top-left-radius 5px
      border-top-right-radius 5px
      display flex
      justify-content center
      left -1px
      padding 16px 0
      position absolute
      right -1px
      svg-icon-style($white, size: 24px)
      top -1px

      .mp-modal-title
        color $white
        font-size-large()
        margin-left 4px

  .custom-event-name-subheader
    border-bottom 1px solid $grey-200
    padding 10px 16px

    .custom-event-name-wrapper
      display inline-block

    mp-tooltip
      display block

      span
        white-space normal

  .mp-modal-content
    background-color $grey-50
    display flex
    flex 1
    flex-direction column
    padding 20px 24px 8px

    .custom-event-builder
      flex 1

    .custom-event-match-text
      color mp-secondary-text-color()
      margin-bottom 20px

  .footer
    align-items center
    border-top 1px solid $grey-200
    display flex
    padding 20px 24px

    .delete-custom-event-button
      svg-icon-style($grey-500, $mp-red)

    .messages-wrapper
      display flex
      flex 1
      flex-direction row-reverse

      .notifications-pause-warning
        align-items center
        display flex
        svg-icon-style($grey-500, pos-top: 1px)

        span
          margin-left 2px

    .modal-actions
      margin-left 8px

      mp-button
        margin-left 8px

  custom-event-builder-dropdown, mp-property-filter-menu
    position absolute

+prefix-classes('mp-confirm-delete-')
  .container
    display flex
    flex-direction column

    .body
      display flex
      flex-direction row
      min-height 92px
      overflow auto
      padding 15px 30px 0 20px
      text-align left

      .icon
        svg-icon-style($mp-red, size: 22px)
        width 22px

      .copy
        margin-left 6px

    .buttons
      border-top 1px solid $grey-200
      margin-top 15px
      padding 15px 20px 15px 0
      text-align right

      mp-button
        margin-left 15px