@import '../../../node_modules/pikaday/css/pikaday.css'
@import '../../stylesheets/defaults'

+host-styles(mp-calendar)
  display inline-block
  width 240px

  .pika-mixpanel
    border 0
    border-radius 10px
    width 100%

    .pika-lendar
      margin-left 0
      margin-right 0
      padding 8px 0
      width 100%

    .pika-title
      color $grey-900
      font-size 14px
      margin-bottom 7px
      text-align center

      .pika-prev,
      .pika-next
        background-color $grey-500
        background-image none
        border-radius 20px
        height 24px
        position absolute
        top 2px
        width 24px

        &::before
          content ''
          display block
          height 30px
          position relative
          top -3px
          width 30px

      .pika-prev
        left 20px
        &::before
          background url('../../../assets/icons/caret-left.svg') no-repeat center
          left -4px

      .pika-next
        right 20px
        &::before
          background url('../../../assets/icons/caret-right.svg') no-repeat center
          left -2px

    table.pika-table
      th
        color $grey-700
        padding-bottom 8px

        abbr
          cursor initial
          text-decoration none

      th, td
        position relative
        width 32px

        &:first-child
          padding-left 15px

        &:last-child
          padding-right 15px

      /* --- button styles --- */

      .pika-button
        background-color transparent
        box-shadow none
        color $grey-700
        font-weight bold
        height 24px
        margin 0 auto
        position relative
        text-align center
        width 24px

      td:not(.is-selected):not(.is-startrange):not(.is-endrange):not(.is-disabled):hover
        .pika-button
          background-color $grey-100
          border-radius 15px
          width 24px

        &.is-inrange .pika-button
          background-color $blue-900

      td.is-selected,
      td.is-startrange,
      td.is-endrange
        .pika-button
          background-color $blue-900
          border-radius 15px
          color $white
          width 24px

      td.is-inrange .pika-button
        color $white

      td.is-disabled
        .pika-button
          opacity 0.5
        &:not(.has-event)
          .pika-button
            color $mp-purple
            opacity 1

  /* --- highlight styles --- */

  .pika-mixpanel:not(.incomplete-range) table.pika-table
    td.is-startrange,
    td.is-endrange
      &::before
        background-color $mp-blue
        content ''
        height 100%
        position absolute
        top 0
        width 20px

      &.is-startrange
        &:not(:last-child)::before
          right 0
        &:last-child
          background-color $mp-blue
          &::before
            background-color $white
            left 0

      &.is-endrange
        &:not(:first-child)::before
          left 0
        &:first-child
          background-color $mp-blue
          &::before
            background-color $white
            right 0

    td.is-startrange.is-endrange::before
      display none

    td.is-inrange
      background-color $mp-blue

    // Handle edge cases around highlighting cells in the month grid where days are not shown because
    // they are from previous or following months. We still want to highlight these cells according
    // to the date range that is selected.
    tr:first-child:not(.has-startrange)
      &.has-inrange, &.has-endrange
        td.is-empty
          background-color $mp-blue

    tr:last-child:not(.has-endrange)
      &.has-inrange, &.has-startrange
        td.is-empty
          background-color $mp-blue

+host-styles(mp-calendar, '[is-double-calendar="true"]')
  width 492px

  .pika-mixpanel
    width 100%

    .pika-lendar
      width 50%

      &:not(:first-child) table
        border-left 1px solid $grey-200

      table.pika-table
        th, td
          &:first-child
            padding-left 18px

          &:last-child
            padding-right 18px