@import "../../../../src/style/abstracts/all";
:local(.datePicker){
    margin-bottom: 12px;
    &:local(.readOnly){
        :local(.inputField){
            cursor: default;
            :local(.dummyInputField){
                border-bottom: 2px solid transparent;
                color: $default-text-color;
            }
        }
    }
    &:local(.disabled){
        :local(.inputField){
            cursor: default;
            :local(.dummyInputField){
                color: #777;
            }
        }
    }
    :local(.inputField){
        cursor: pointer;
        :local(.dummyInputField){
            height: 57px;
            border-bottom: 2px solid #eee;
            position: relative;
            z-index: 1;
            :local(.dummyInputFieldValue){
                margin-top: 32px;
                padding-left: 8px;
                display: inline-block;
            }
        }
    }
    :local(.modal){
        float: right;
        position: relative;
        top: -46px;
    }
    &:local(.readOnly):after{
        content: none;
    }
    &:local(.disabled):after{
        content: "\F073";
        color: #CCC;
        font-family: FontAwesome;
        position: relative;
        float: right;
        top: -40px;
        right: 13px;
    }
}
:local(.toggleTab){
    width: 50%;
    display: inline-block;
    float: left;
    font-size: 36px;
    text-align: center;
    cursor: pointer;
    @include transition(all .2s);
    &:before{
        font-family: FontAwesome;
    }
    &:hover{
        background-color: bright-gray($dark-color);
    }
    &:active {
        background-color: bright-gray-active($dark-color);
    }
    &:local(.toggleTabCallendar){
        border-top-left-radius: 2px;
        &:before{
            content: "\f073";
        }
    }
    &:local(.toggleTabClock){
        border-top-right-radius: 2px;
        &:before{
            content: "\f017";
        }
    }
}

:local(.preview){
    background-color: $primary-color;
    color: #FFF;
    text-align: center;
    padding: 24px 0;
    :local(.previewDate){
        font-size: 18px;
    }
    :local(.previewDayNumber){
        font-size: 46px;
    }
    :local(.previewDayName){
        font-size: 22px;
    }
    :local(.previewClock){
        span:after{
            content: ":";
            display: inline-block;
        }
        span:last-child:after{
            content: none;
        }
        &:local(.bigClock){
            font-size: 40pt;
        }
    }
    :local(.previewInfoMessage){
        font-size: 26px;
    }
}

:local(.yearSelector),
:local(.monthSelector){
    font-size: 12pt;
    width: 50%;
    float: left;
    padding: 6px 0;
    text-align: center;
    a {
        vertical-align: middle;
    }
}

:local(.hoursSelector),
:local(.minutesSelector),
:local(.secondsSelector){
    float: left;
    &:local(.size-1-0),
    &:local(.size-1-1){
        width: 100%;
    }
    &:local(.size-1-2){
        width: 50%;
    }
    &:local(.size-1-3){
        width: 33%;
    }
    :local(.toggleButton){
        text-align: center;
        a {
            display: block;
        }
    }
}

:local(.callendar){
    display: none;
    max-width: 296px;
    padding: 0 15px;
    margin: auto;
    font-size: 12pt;
    :local(.dayName){
        width: 14.285%;
        text-align: center;
        display: inline-block;
    }
    :local(.day){
        width: 14.285%;
        text-align: center;
        display: inline-block;
        line-height: 36px;
        border-radius: 50%;
        border: 1px solid transparent;
        cursor: pointer;
        @include transition(all .2s);
        &:hover {
            background-color: bright-gray($dark-color);
        }
        &:active {
            background-color: bright-gray-active($dark-color);
        }
        &.active {
            color: $primary-color;
            border: 1px solid $primary-color;
        }
        &.selected {
            color: #FFF;
            background-color: $primary-color;
            border: 1px solid $primary-color;
        } 
    }

}
:local(.clock){
    display: none;
    vertical-align: top;
}

:local(.clearfix){
    clear: both;
}

.active-tab-callendar{
    :local(.toggleTabCallendar){
        background-color: $primary-color;
        color: #FFF;
    }
    :local(.callendar){
        display: block;
    }
}
.active-tab-clock{
    :local(.toggleTabClock){
        background-color: $primary-color;
        color: #FFF;
    }
    :local(.clock){
        display: block;
    }
}