.n-options-date
  &-main
    display flex

  // 头部
  &-header
    display flex
    align-items center
    padding 8px 4px
    width 100%
    .n-icon
      margin 0 4px
  &-title
    flex auto
    n-font-m()
    color $n-color-1
    font-weight bold
    text-align center

  // 日历
  &-panel
    width 272px
    height 277px
    padding 0 10px
  &-item
    position relative
    margin 4px 0
    height 24px


// 日期
.n-options-date-item
  &-value
    n-font-m()
    width 24px
    border-radius 4px
    text-align center
    transition all .2s ease
    border 1px solid transparent
    color #cccfd3
    display inline-block
    z-index 1
  &-disabled
    cursor not-allowed
  &-available
    cursor pointer
  &-available:hover
    background-color #E2EEFF
  &-month&-available
    color $n-color-1
  &-month&-active
    color white
    background-color $primary-color
  &-month&-current
    border-color $primary-color

// 范围
.n-options-date-item-range
  &:before
    content ''
    background-color #e8f7ff
    position absolute
    top 0
    right 0
    bottom 0
    left 0
  .n-options-date-item-value
    position relative
    z-index 1
  &-start:before
    left 6px
    border-radius 4px 0 0 4px
  &-end:before
    right 6px
    border-radius 0 4px 4px 0
  &-start .n-options-date-item-value
  &-end .n-options-date-item-value
    color white
    background-color $primary-color


// 时间
.n-options-date-times
  height 277px
  padding 0 8px
  &-main
    display flex
.n-options-date-time
  width 80px
  margin 0 2px
  &-main
    height 190px
    border-radius 4px
    background-color #fbfcfe
  &-item
    cursor pointer
    n-font-s()
    padding 2px 0
    color $n-color-1
    transition all 0.2s ease
    border-radius 4px
    text-align center
    &:hover
      color $primary-color
      background-color tint($primary-color, 90%)
    &.active
      color white
      background-color $primary-color