@require('./variables.styl')
@require('../input/variables.styl')

.k-datepicker
    display inline-block
    outline none
    width $datepicker-width
    .k-input
        width 100%
    .k-inner
        cursor pointer
    &:focus
    &.k-show
        .k-inner
            border $input-focus-border
    // range
    &.k-range
        width $datepicker-range-width 

.k-datepicker-content
    color $datepicker-color
    max-width none
    padding 0
    .k-calendar-wrapper
        outline none
        width $datepicker-content-width
        padding $datepicker-padding
        position relative
    .k-day
    .k-weekday
        display inline-block
        height $datepicker-day-width 
        width $datepicker-day-width 
        border 1px solid transparent
        line-height s('calc(%s - 2px)', $datepicker-day-width)
        text-align center
        margin $datepicker-day-margin 
    .k-day
        border-radius 50%
        cursor pointer
        position relative
        // &:hover
        &.k-hover
            background $datepicker-day-hover-bg-color 
            color $datepicker-day-hover-color
        &.k-out
            color $datepicker-day-out-color 
        &.k-today
            border $datepicker-day-today-border 
        &.k-active
            background $datepicker-day-active-bg-color 
            color $datepicker-day-active-color 
            &.k-today
                border-color $datepicker-day-active-today-border-color
        // disabled date
        &.k-disabled
            color $datepicker-day-disabled-color 
            cursor not-allowed
            background $datepicker-day-disabled-hover-bg-color 
    .k-weekdays
        border-bottom $datepicker-inner-border 
    if $datepicker-weekday-color != inherit
        .k-weekday
            color $datepicker-weekday-color 

    .k-month
        text-align center
        padding $datepicker-month-padding 
        .k-text
            margin $datepicker-month-text-margin 
            line-height $datepicker-month-text-line-height 
        // .k-icon
            // font-size $datepicker-month-icon-font-size
        .k-prev
        .k-left-btns
            float left
        .k-next
        .k-right-btns
            float right
        .k-text-wrapper
            font-size 14px
            cursor pointer
            overflow hidden
            position relative
            .k-icon
                position absolute
                margin-left -1rem
                top 50%
                transform translateY(-50%)

    .k-scroll-select
        height $datepicker-scroll-select-height
        margin 12px 0

    // range
    .k-range
        white-space nowrap
        .k-calendar-wrapper
            display inline-block
            vertical-align top
            &:last-of-type
                margin-left $datepicker-range-gutter
    .k-in-range
        color $datepicker-range-day-color
        &:after
            content ''
            display inline-block
            position absolute
            box-sizing content-box
            width $datepicker-day-width
            height $datepicker-day-width
            padding $datepicker-range-day-padding
            background $datepicker-range-day-bg-color 
            left $datepicker-range-day-left 
            top $datepicker-range-day-top 
            margin-left -1px
            z-index -1

    // shortcuts
    &.k-with-shortcuts
        .k-calendar-wrapper
            margin-left $datepicker-shortcuts-width 
    .k-shortcuts
        position absolute
        left 0
        top 0
        bottom 0
        width $datepicker-shortcuts-width 
        border-right $datepicker-inner-border 
        padding $datepicker-shortcuts-padding 
        .k-item
            line-height $datepicker-shortcuts-line-height 
            padding $datepicker-shortcuts-item-padding 
            cursor pointer
            &:hover
                background $datepicker-shortcuts-item-hover-bg-color 

    // datetime
    .k-tabs
        position absolute
        top 0
        left 0
        width 100%
        border none
        .k-wrapper
            float none
        .k-tab
            width 50%
    .k-datetime
        .k-date-picker
        .k-time-picker
            margin-top $datepicker-datetime-margin-top  
    .k-range
        .k-datetime:nth-child(2)
            border-left $datepicker-inner-border
    .k-time-picker
        .k-scroll-select
            height $datepicker-time-scroll-select-height

    // footer
    .k-footer
        border-top 1px solid #e5e5e5
        padding 8px 16px
        text-align right


requireTheme('datepicker')