/*
 * Made by Nima Izadi (nim.izadi@gmail.com / @Nima_Izadi / github.com/nim1989)
 */

@import "mixins_and_vars";

.selected-button {
    // If you have a specific selected-button style, you can do @extend .my-btn--selected
    background-color: $selectedColor;
    color           : white;
}

// PATCH
//.datepicker_bootstrap:after {
//    content: '';
//    display: inline-block;
//    border-left: 6px solid transparent;
//    border-right: 6px solid transparent;
//    border-bottom: 6px solid #ffffff;
//    position: absolute;
//    top: -6px;
//    left: 7px;
//}
//.datepicker_bootstrap:before {
//    content: '';
//    display: inline-block;
//    border-left: 7px solid transparent;
//    border-right: 7px solid transparent;
//    border-bottom: 7px solid $grayLightBetween;
//    position: absolute;
//    top: -7px;
//    left: 6px;
//}

//$datepicker-width: 18em;
//$datepicker-height: 18em;
//$datepicker-header-height: 2.5em;
// PATCH EOF

.datepicker_bootstrap {
    position        : absolute;
    font-size       : 1em;
    color           : #000;
    line-height     : normal;
    width           : $datepicker-width;
    padding         : 0.3em;
    background-color: white;
    border          : 1px solid $grayLightBetween;
    @include box-shadow(0 1px 6px rgba(0,0,0,0.2)); // PATCH
    @include border-radius(3px);

    /* header
    ********************************************************/
    .header {
        text-align      : center;
        border-bottom   : inset 1px rgba(204, 204, 204, 0.55);
        padding-bottom  : 0.3em;
        font-weight     : bold;
        .title {
            text-align: center;
            margin    : auto;
            display: inline-block;
            .titleText{
                margin  : auto;
                padding : 0.5em;
                @include border-radius(3px);
                &:hover {
                    background-color: $hoveredColor;
                }
            }
        }
        .previous, .next {
            position            : absolute;
            cursor              : pointer;
            overflow            : hidden;
            top                 : 1em;
            display             : block;
            border-top          : 6px solid white;
            border-bottom       : 6px solid white;
            height              : 0px;
        }
        .previous {
            left            : 0.4em;
            border-right    : 7px solid black;
            &:hover { border-right-color: $hoveredColor; }
        }
        .next {
            right: 0.4em;
            border-left: 7px solid black;
            &:hover { border-left-color: $grayLight; }
        }
        .closeButton {
            display: none;
        }
    }
    /* body
    ********************************************************/
    .body {
        position    : relative;
        top         : 0;
        left        : 0;
        height      : $datepicker-height - $datepicker-header-height;
        overflow    : hidden;
        margin-top  : 0.2em;
        .slider > div  {
            height      : $datepicker-height - $datepicker-header-height;
            > div, table {
                height: 100%;
                width : 100%;
                text-align  : center;
            }
            thead th {
                height: 2em;
            }
            thead th:hover {
                background-color: transparent;
            }
        }
    }


    /* days-grid
    ********************************************************/
    .days {
        td {
            width: (100% / 7);
        }
        .otherMonth {
            color: $grayLight;
        }
    }
    /* months-grid
    ********************************************************/
    .months td {
        width: (100% / 3);
    }
    /* years-grid
    ********************************************************/
    .years td {
        width: (100% / 4);
    }

    /* years months and days style
    ********************************************************/
    .days .day, .months .month, .years .year {
        cursor: pointer;
        @include border-radius(3px);
        &:hover {
            background-color: $hoveredColor;
        }
        &.selected, &.selected:hover {
            @extend .selected-button;
        }
    }

    /* global
    ********************************************************/
    .unavailable {
        color           : $grayLighter !important;
        cursor          : default !important;
        text-decoration : line-through;
    }

    table {
        border-spacing: 0;
    }
    th,
    td {
        padding: 0;
        text-align: center; // PATCH
    }

    /* time
    ********************************************************/
    .time {
        position  : relative;
        width     : 100%;
        padding-top: 3em;
        text-align: center;
        > div {
            display: inline-block;
        }
    }

    .time .hour,
    .time .separator,
    .time .minutes {
        width       : 3em;
        font-size   : 1.5em;
        text-align  : center;
        padding     : 0.2em;
    }

    .time .separator {
        width: 1em;
    }
    .time .ok:active {
        @include box-shadow(inset 0 1px 5px $grayLight);
    }
    .time .ok:hover {
        background-color: $grayLighter;
    }
    .time .ok {
        margin          : 1em auto;
        display         : block;
        font-size       : 1.5em;
        width           : 5em;
        text-align      : center;
        cursor          : pointer;
        box-shadow      : none;
        border          : solid 1px #CCC;
        outline         : none;
        background-color: white;
        @include border-radius(2px);
    }
}