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

.date-range-picker-container
  position relative
  z-index 0

  .builder-pane-dropdown-container
    border-bottom 1px solid $grey-150
    margin-bottom 20px
    padding-bottom 10px

    mp-builder-dropdown
      display block

  .upsell-header
    display flex
    font-size 11px
    margin 6px 0 12px
    svg-icon-style($mp-purple)

    .upsell-text
      align-items center
      color $grey-700
      display flex
      margin-left 4px

      .upgrade-link
        color $mp-purple
        text-decoration none

        &:hover
          opacity 0.7

.date-range-picker
  min-height 120px
  position relative
  z-index 0

  .relative-range-picker, mp-calendar-input
    position relative
    width 100%

  .relative-range-picker
    display flex
    padding-bottom 20px
    position relative
    z-index 100
    *
      box-sizing border-box

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

    input
      background-color $white
      border 1px solid $grey-200
      border-radius 4px
      box-shadow inset 0 1px 1px alpha(black, 0.05)
      color $grey-700
      flex 1
      font-family $family-helvetica
      font-size-small()
      margin-right 12px
      min-width 0
      outline 0
      padding 10px 12px
      width 30%

      &.error
        border-color $mp-red

    .range-unit
      background-color $grey-100
      border-radius 3px
      color $grey-700
      font-size-xs()
      font-weight $weight-bold
      line-height 1
      margin-left 5%
      padding 12px 0
      text-align center
      width 25%

    mp-builder-dropdown
      width 70%