@import url('meta');
@import url('glue');
@import url('color');

.calendar {
    .bordered;
    width: @min_input_width * 1.25;
    display: inline-block;
    background: @white;
    ._label {
        border-radius: @radius @radius 0 0;
        padding: @gap;
        background-color: @primaryColor;
        color: @light_gray;
        a {
            .revert_link;
        }
        ._year {
            font-size: @normal_font_size * 1.5;
        }
    }
    ._picker-label {
        overflow: hidden;
        background: @white;
        display: table;
        width: 100%;
        line-height: 30px;
        ._nav, ._link {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        ._link {
            ._year-link, ._month-link {
                .link;
                color: @primaryColor;
            }
        }
        a {
            .primary_link;
        }
        ._nav {
            width: 20px;
            i {
                .icon_font;
                color: @dark_gray;
            } 
            &._prev i:before {
                content: "\e5cb";
            }
            &._prev._year i:before {
                content: "\e5dc";
            }
            &._next i:before {
                content: "\e5cc";
            }
            &._next._year i:before {
                content: "\e5dd";
            }
        }
    }
    table {
        width: 100%;
        background: @mini_gray;
        font-size: @normal_font_size - 3px;
        td {
            @_h: 24px;
            text-align: center;
            line-height: @_h;
            a {
                display: block;
                margin: auto;
                margin-bottom: 8px;
                width: @_h;
                height: @_h;
                overflow: hidden;
                line-height: @_h;
                &._today {
                    border-radius: @_h;
                    color: @primaryColor;
                    border: 1px solid @primaryColor;
                }
                &._active {
                    background-color: @primaryColor;
                    border-radius: @_h;
                    color: @white;
                }
            }
        }
    }
    ._day-picker>table {
        border-radius: 0 0 @radius @radius;
    }
    ._month-picker, ._year-picker {
        ul {
            overflow: hidden;
            border-radius: 0 0 @radius @radius;
            background: @mini_gray;
            li {
                float: left;
                width: 25%;
                text-align: center;
                line-height: 46px;
                ._active {
                    .primary_link;
                }
            }
        }
    }
}