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

+host-styles(mp-calendar-input)
  display block

  .date-inputs
    display flex
    padding-bottom 15px
    position relative

    mp-date-input
      flex 1
      min-width 0

      &.focused
        .date-input-container
          input
            border 1px solid $mp-blue

      .date-input-container
        display flex
        position relative

        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()
          min-width 0
          outline 0
          padding 10px 12px

          &.error
            border 1px solid $mp-red

    .preposition
      background-color $grey-100
      border-radius 3px
      color $grey-700
      font-size 11px
      font-weight $weight-bold
      line-height 1
      margin 0 12px
      padding 12px
      text-transform uppercase

  mp-tooltip
    left 0
    position absolute
    top 0
    width 100%

  .calendars
    mp-box-shadow(2)

    mp-calendar, .calendar
      width 100%

    calendar, .pika-mixpanel
      display inline-block

      &::after
        display none

      &, .pika-select
        z-index 0