@charset "UTF-8";
@import "$${path.common}/obelisk/core/_var";

$calendar-color-border: $color-brush-medium;
$calendar-color-shadow: rgba(0, 33, 66, .1);

$calendar-color-selected-font: #FFF;
$calendar-color-selected-bg: $color-blue;

$calendar-color-hover-font: $color-black;
$calendar-color-hover-bg: $color-brush-tiny;

$calendar-color-active-bg: #d7edfc;

$calendar-color-normal-font: $color-black;
$calendar-color-normal-bg: #F5F7FA;

$calendar-color-action: $color-blue;
$calendar-color-arrow: #000;
$calendar-color-hover-arrow: rgba(0, 0, 0, .5);

$calendar-grid-height: 25px;
$calendar-grid-width: 35px;
$calendar-grid-font-size: 12px;

@mixin calendar ($tag) {
    .#{$tag} {
        padding: 15px;
        width: 7 * $calendar-grid-width;
        border: 1px solid $calendar-color-border;
        background-color: #FFF;
        box-shadow: 2px 2px 1px 0 $calendar-color-shadow;
        border-radius: 2px;
        font-size: $calendar-grid-font-size;

        &.is-hidden {
            display: none;
        }

        .#{$tag}-header {
            position: relative;
            font-size: $calendar-grid-font-size;

            .title {
                display: block;
                margin: 0;
                color: $color-blue;
                line-height: $calendar-grid-height;
                text-align: center;
                text-decoration: none;
                cursor: default;

                .month {
                    margin-right: 10px;
                }

                .month, .year {
                    position: relative;
                    cursor: pointer;

                    select {
                        position: absolute;
                        top: 0;
                        left: 0;
                        opacity: 0;
                        filter: alpha(opacity=0);
                    }
                }
            }

            .pre, .next {
                display: block;
                width: $calendar-grid-height;
                height: $calendar-grid-height;
                position: absolute;
                left: 0;
                top: 0;
                cursor: pointer;
                opacity: .5;
                filter: alpha(opacity=50);
                line-height: $calendar-grid-height;
                vertical-align: middle;

                &:hover {
                    opacity: 1;
                    filter: alpha(opacity=100);
                }
            }

            .next {
                left: inherit;
                right: 0;
                text-align: right;
            }
        }

        &.split-cols2 {
            width: 7 * 2 * $calendar-grid-width + 20!important;
            font-size: 0;
        }

        &.split-cols3 {
            width: 7 * 3 * $calendar-grid-width + 40!important;
            font-size: 0;
        }

        .#{$tag}-split {
            display: inline-block;
            *display:inline;
            *zoom:1;
            padding-left: 20px;

            .pre, .next {
                display: none;
            }

            &:first-child {
                padding-left: 0;
                .pre { display: block; }
            }

            &:last-of-type {
                .next { display: block; }
            }

            // IE8 fixer
            .show { display: block; }
        }


        .#{$tag}-weeks, .#{$tag}-days {
            margin: 0;
            padding: 0;
            display: block;
            font-size: $calendar-grid-font-size;

            li {
                float: left;
                display: block;
                width: $calendar-grid-width;
                height: $calendar-grid-height;
                list-style-type: none;
                text-align: center;
                vertical-align: middle;
                line-height: $calendar-grid-height;
            }
        }

        .#{$tag}-weeks:after, .#{$tag}-days:after, .#{$tag}-content:after {
            *zoom: 1;
            content: "";
            display: table;
            clear: both;
        }

        .#{$tag}-weeks {
            margin-top: 10px;

            li {
                cursor: default;
            }
        }

        .#{$tag}-days {
            margin-top: 5px;
            width: 7 * $calendar-grid-width;
            clear: both;

            li {
                background-color: $calendar-color-normal-bg;
                color: $calendar-color-normal-font;
                cursor: pointer;

                &:hover {
                    background-color: $calendar-color-hover-bg;
                    color: $calendar-color-hover-font;
                }

                &.selected {
                    background-color: $calendar-color-selected-bg!important;
                    color: $calendar-color-selected-font!important;
                }

                &.active {
                    background-color: $calendar-color-active-bg;
                }

                &.disabled {
                    color: #B2B2B2;
                    background-color: #F5F7FA;
                    cursor: default;
                    &:hover {
                        background-color: #F5F7FA;
                    }
                }

                &.empty {
                    background-color: #FFF;
                    cursor: default;

                    &:hover {
                        background-color: #FFF;
                    }
                }
            }
        }

        .#{$tag}-current {
            margin-top: 10px;
            color: $color-blue;
            text-align: center;
            line-height: $calendar-grid-height;
            vertical-align: middle;
            cursor: pointer;

            .date {
                margin-left: 5px;
            }
        }

        .#{$tag}-footer {
            margin: 20px 0 0 0;
            padding: 0;
            font-size: 0;

            .#{$tag}-area {
                display: inline-block;
                *display:inline;
                *zoom:1;
                padding: 0 5px;
                margin-right: 5px;
                border: 1px solid $color-brush-medium;
                border-radius: 2px;
                color: $color-black-light;
                font-size: $calendar-grid-font-size;
                cursor: pointer;

                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }
}

@include calendar('calendar');