.i-datepicker{
    @import (reference) "../i/i.less";
    
    &__popup{
        box-sizing: border-box;
        width: 15em;
        padding: .5em;
    }
    &__month{
        display: inline-flex;
        flex-flow: row wrap;
        
        .i-select__options-list__item{
            flex: 0 0 auto;
            margin: 0;
            padding: 0;
            &-selected{
                box-shadow: inset 0 0 0 2px rgba(255, 0, 0, .5);
                &:before{
                    border: none;
                }
            }
        }

    }
    &__week{
        display: flex;
        flex-flow: row;
        border-bottom: 1px solid rgba(0,0,0,.2);
    }
    &__week>&__day{
        line-height: 2;
    }

    &__week,&__month{
        box-shadow: inset -4em 0 0 0 #f3f1ed;
    }

    &__day{
        box-sizing: border-box;
        width: 2em;
        text-align: right;
        padding-right: .4em;
        
    }

    &__form{
        padding-bottom: .5em;
        display: flex;
        flex-flow: row;
        align-items: center;
        &-title{
            text-align: center;
            flex-grow: 1;
            font-weight: bold;
        }
        &-prev,&-next{
            .i-button{
                height: 1.5em;
                width: 2em;
                padding: 0;
                position: relative;
                &:before{
                    .arrow-left();
                }
            }

        }
        &-next{
            .i-button:before{
                .arrow-right();
            }
        }
    }

    .arrow-left(@scale: .5, @angle: 135deg){
        .arrow(@scale, @angle);
        bottom: ~"calc(50% - .3rem)";
        right: ~"calc(50% - .3rem)";
    }

    .arrow-right(@scale: .5){
        .arrow-left(@scale, -45deg);
    }

}