//
//  tail.datetime - The vanilla way to select dates and times!
//  @file       ./less/tail.datetime-default.less
//  @author     SamBrishes <sam@pytes.net>
//  @version    0.4.13 - Beta
//
//  @website    https://github.com/pytesNET/tail.DateTime
//  @license    X11 / MIT License
//  @copyright  Copyright © 2018 - 2019 SamBrishes, pytesNET <info@pytes.net>
//
@import "tail.mixins.less";

//
//  SETTINGS :: ALPHA COLOR
//
@alpha: transparent;

//
//  SETTINGS :: DEFAULT COLOR
//
@color: #colors.red();

//
//  SETTINGS :: COLORS
//
#colors() {
    .red() {
        primary: #CD283C;
        secondary: #149BE6;
    }
    .orange() {
        primary: #E67D1E;
        secondary: #CD283C;
    }
    .blue() {
        primary: #149BE6;
        secondary: #32B93C;
    }
    .green() {
        primary: #32B93C;
        secondary: #E67D1E;
    }
}

//
//  SETTINGS :: SCHEME
//
#scheme() {
    family: "Open Sans", Calibri, Arial, sans-serif;
    shadow: 0 1px 3px rgba(0, 0, 0, 0.3125);

    foreground: #303438;
    background: white;

    .tooltip() {
        foreground: white;
        background: #202428;
    }
    .header() {
        foreground: white;
        background: @color[primary];
        textshadow: darken(@color[primary], 15%);
        separators: darken(@color[primary], 10%);
    }
    .date() {
        foreground: #303438;
        background: white;

        .weekdays() {
            foreground: white;
            background: #303438;
        }
        .disabled() {
            foreground: #909498;
            background: #F0F0F0;
            strikeouts: darken(white, 25%);
        }
        .outside() {
            foreground: #909498;
            background: #F0F0F0;
        }
        .selection() {
            default: @alpha;
            hovered: darken(white, 20%);
            disabled: @alpha;
            selected: @color[secondary];
        }
    }
    .time() {
        foreground: #303438;
        background: white;
        separators: darken(white, 15%);
    }
    .input() {
        foreground: #303438;
        background: #F0F0F0;

        .hover() {
            foreground: #303438;
            background: #E0E0E0;
        }
        .focus() {
            foreground: white;
            background: @color[secondary];
        }
        .disabled() {
            foreground: #A0A4A8;
            background: #F6F6F6;
        }
    }
}

//
//  STYLES
//

/* @start MAIN CALENDAR */
.tail-datetime-calendar{
    &, *, *:before, *:after{
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
}
.tail-datetime-calendar{
    top: 0;
    left: 0;
    width: 275px;
    height: auto;
    margin: 15px;
    padding: 0;
    z-index: 3000;
    display: block;
    position: absolute;
    visibility: hidden;
    direction: ltr;
    border-collapse: separate;
    font-family: #scheme[family];
    background-color: #scheme[background];
    .border(0; solid; @alpha; 3px;);
    .shadow(#scheme[shadow]);

    &:after{
        clear: both;
        content: "";
        display: block;
        font-size: 0;
        visibility: hidden;
    }

    // Static
    &.calendar-static{
        top: auto;
        left: auto;
        margin-left: auto;
        margin-right: auto;
        position: static;
        visibility: visible;
    }

    // Close Button
    button.calendar-close{
        top: 100%;
        right: 15px;
        color: #scheme[foreground];
        width: 35px;
        height: 25px;
        margin: 1px 0 0 0;
        padding: 5px 10px;
        opacity: 0.5;
        outline: none;
        display: inline-block;
        position: absolute;
        font-size: 14px;
        line-height: 1.125em;
        text-shadow: none;
        background-color: #scheme[background];
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\
        9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsPSIjMzAzNDM4IiBkP\
        SJNNy40OCA4bDMuNzUgMy43NS0xLjQ4IDEuNDhMNiA5LjQ4bC0zLjc1IDMuNzUtMS40OC0xLjQ4TDQuNTIgOCAuNzcgNC4y\
        NWwxLjQ4LTEuNDhMNiA2LjUybDMuNzUtMy43NSAxLjQ4IDEuNDhMNy40OCA4eiIvPjwvc3ZnPg==");
        background-repeat: no-repeat;
        background-position: center center;
        .border(0; solid; @alpha; 0 0 3px 3px);
        .shadow(#scheme[shadow]);
        .transition(opacity 142ms linear);
    }
    button.calendar-close:hover{
        opacity: 1.0;
    }
}
/* @end MAIN CALENDAR */

/* @start CALENDAR TOOLTIP */
.tail-datetime-calendar .calendar-tooltip{
    color: #scheme.tooltip[foreground];
    width: auto;
    margin: 0;
    padding: 0;
    display: block;
    position: absolute;
    background-color: #scheme.tooltip[background];
    border-radius: 3px;

    &:before{
        top: -7px;
        left: 50%;
        width: 0;
        height: 0;
        margin: 0 0 0 -6px;
        content: "";
        display: block;
        position: absolute;
        .border(0 7px 7px 7px; solid; @alpha @alpha #scheme.tooltip[background] @alpha);
    }
    .tooltip-inner{
        width: auto;
        margin: 0;
        padding: 4px 7px;
        display: block;
        font-size: 12px;
        line-height: 14px;
    }
}
/* @end CALENDAR TOOLTIP */

/* @start CALENDAR ACTIONs */
.tail-datetime-calendar .calendar-actions{
    color: #scheme.header[foreground];
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0;
    display: table;
    overflow: hidden;
    border-spacing: 0;
    border-collapse: separate;
    background-color: #scheme.header[background];
    .border(0; solid; @alpha; 3px 3px 0 0;);

    span{
        margin: 0;
        padding: 0;
        display: table-cell;
        position: relative;
        text-align: center;
        line-height: 36px;
        text-shadow: -1px -1px 0 #scheme.header[textshadow];
        background-repeat: no-repeat;
        background-position: center center;

        &[data-action]{
            cursor: pointer;
        }
        &.action{
            width: 36px;
            font-size: 22px;
        }
        &.label{
            width: auto;
        }
        &:first-child:before,
        &:last-child:before{
            top: 5px;
            bottom: 5px;
            width: 1px;
            height: auto;
            margin: 0;
            padding: 0;
            content: "";
            display: inline-block;
            position: absolute;
            background-color: #scheme.header[separators];
        }
        &:first-child:before{
            right: -1px;
        }
        &:last-child:before{
            left: -1px;
        }
        &:first-child:hover:before,
        &:last-child:hover:before{
            display: none;
        }
        &[data-action]:hover{
            background-color: #scheme.header[separators];
        }
    }
    span.action-prev{
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\
        9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgNiAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iT\
        TYgMkwwIDhsNiA2VjJ6Ii8+PC9zdmc+");
    }
    span.action-next{
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\
        9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgNiAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iT\
        TAgMTRsNi02LTYtNnYxMnoiLz48L3N2Zz4=");
    }
    span.action-submit{
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\
        9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkP\
        SJNMTIgNWwtOCA4LTQtNCAxLjUtMS41TDQgMTBsNi41LTYuNUwxMiA1eiIvPjwvc3ZnPg==");
    }
    span.action-cancel{
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\
        9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkP\
        SJNNy40OCA4bDMuNzUgMy43NS0xLjQ4IDEuNDhMNiA5LjQ4bC0zLjc1IDMuNzUtMS40OC0xLjQ4TDQuNTIgOCAuNzcgNC4y\
        NWwxLjQ4LTEuNDhMNiA2LjUybDMuNzUtMy43NSAxLjQ4IDEuNDhMNy40OCA4eiIvPjwvc3ZnPg==");
    }
}
/* @end CALENDAR ACTIONs */

/* @start CALENDAR DATEPICKER */
.tail-datetime-calendar .calendar-datepicker{
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    position: relative;

    table{
        width: 100%;
        margin: 0;
        padding: 0;
        border-spacing: 0;
        border-collapse: separate;
    }
    table tr th, table tr td{
        color: #scheme.date[foreground];
        height: 30px;
        padding: 0;
        position: relative;
        font-size: 13px;
        text-align: center;
        font-weight: normal;
        text-shadow: none;
        line-height: 30px;
        background-color: @alpha;
        .border(0; solid; @alpha; 0px;);
    }
    table tr th{
        color: #scheme.date.weekdays[foreground];
        background-color: #scheme.date.weekdays[background];
    }
    table tr td{
        cursor: pointer;
    }
    table tr td span.inner{
        margin: 0;
        padding: 0;
        display: inline-block;
    }

    // Special Fields
    table tr td.date-disabled{
        cursor: not-allowed;
        color: #scheme.date.disabled[foreground];
        background-color: #scheme.date.disabled[background];

        &:after{
            left: 3px;
            bottom: 3px;
            width: 35px;
            height: 1px;
            margin: 0;
            padding: 0;
            content: "";
            display: inline-block;
            position: absolute;
            background-color: #scheme.date.disabled[strikeouts];
            transform-origin: 2px -5px;
            transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
        }
    }
    table tr td.date-previous,
    table tr td.date-next{
        color: #scheme.date.outside[foreground];
        background-color: #scheme.date.outside[background];
    }
    table tr td.date-today:before,
    table tr td .tooltip-tick{
        top: 5px;
        width: 5px;
        height: 5px;
        margin: 0;
        padding: 0;
        z-index: 20;
        content: "";
        display: inline-block;
        position: absolute;
        .border(0; solid; @alpha; 50%;);
    }
    table tr td.date-today:before{
        left: 5px;
        background-color: @color[secondary];
    }
    table tr td .tooltip-tick{
        right: 5px;
        background-color: #scheme.tooltip[background];
    }
    table tr td .tooltip-tick:before,
    table tr td .tooltip-tick:after{
        display: none;
    }

    // Calendar View `Days`
    table tr th.calendar-week,
    table tr td.calendar-day{
        width: 14.28571428571429%;
        height: 35px;

        span.inner{
            width: 31px;
            height: 31px;
            line-height: 29px;
            .border(1px; solid; #scheme.date.selection[default]; 50%;);
        }
        &:hover span.inner{
            border-color: #scheme.date.selection[hovered];
        }
        &.date-disabled span.inner,
        &.date-disabled:hover span.inner{
            border-color: #scheme.date.selection[disabled];
        }
        &.date-select span.inner,
        &.date-select:hover span.inner{
            color: #scheme.date.selection[selected];
            border-color: #scheme.date.selection[selected];
        }
    }

    // Calendar View `Months`, `Years` and `Decades`
    table tr td.calendar-month,
    table tr td.calendar-year,
    table tr td.calendar-decade{
        width: 33.3333333333%;
        height: 40px;
        .transition(color 142ms linear);

        &.date-today:before{
            left: 50%;
            margin-left: -2.5px;
        }

        span.inner{
            width: auto;
            height: 31px;
            line-height: 29px;
        }
        span.inner:before,
        span.inner:after{
            width: 20px;
            height: 20px;
            content: "";
            z-index: 15;
            display: inline-block;
            position: absolute;
            .border(1px; solid; @alpha;);
            .transition(all 142ms linear);
        }
        span.inner:before{
            top: 0;
            left: 0;
        }
        &:hover span.inner:before{
            top: 6px;
            left: 6px;
            border-top-color: #scheme.date.selection[hovered];
            border-left-color: #scheme.date.selection[hovered];
        }
        span.inner:after{
            right: 0;
            bottom: 0;
        }
        &:hover span.inner:after{
            right: 6px;
            bottom: 6px;
            border-right-color: #scheme.date.selection[hovered];
            border-bottom-color: #scheme.date.selection[hovered];
        }
    }
    table tr td.calendar-year,
    table tr td.calendar-decade{
        width: 25%;
    }
    table tr td.calendar-decade span.inner{
        height: 54px;
        padding: 7px 15px;
        text-align: left;
        line-height: 20px;
    }
}
/* @end CALENDAR DATEPICKER */

/* @start CALENDAR TIMEPICKER */
.tail-datetime-calendar .calendar-timepicker{
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    text-align: center;
    .border(1px 0 0 0; solid; #scheme.time[separators]);

    .timepicker-field{
        width: 28%;
        margin: 0;
        padding: 15px 0 7px 0;
        display: inline-block;
        position: relative;
        text-align: center;

        &:first-of-type{
            text-align: right;
        }
        &:last-of-type{
            text-align: left;
        }
        input[type="text"]{
            color: #scheme.input[foreground];
            width: 100%;
            height: 29px;
            margin: 0;
            z-index: 4;
            padding: 3px 20px 3px 5px;
            outline: 0;
            display: inline-block;
            position: relative;
            font-size: 12px;
            text-align: center;
            line-height: 23px;
            appearance: textfield;
            -moz-appearance: textfield;
            -webkit-appearance: textfield;
            background-color: #scheme.input[background];
            .border(0; solid; @alpha; 3px;);
            .shadow(none);
            .transition(color 142ms linear, border 142ms linear, background 142ms linear;);

            &:hover{
                color: #scheme.input.hover[foreground];
                background-color: #scheme.input.hover[background];
            }
            &:focus{
                color: #scheme.input.focus[foreground];
                background-color: #scheme.input.focus[background];
            }
            &:disabled{
                cursor: not-allowed;
                color: #scheme.input.disabled[foreground];
                background-color: #scheme.input.disabled[background];
            }
        }
        button.picker-step{
            width: 20px;
            height: 15px;
            right: 0;
            margin: 0;
            padding: 0;
            z-index: 15;
            display: inline-block;
            position: absolute;
            background-color: #scheme.input[background];
            .shadow(none;);
            .transition(border 142ms linear, background 142ms linear;);

            &:before{
                top: 4px;
                left: 50%;
                width: 0;
                height: 0;
                margin: 0 0 0 -4px;
                padding: 0;
                content: "";
                display: inline-block;
                position: absolute;
                .transition(border 142ms linear;);
            }
            &.step-up{
                top: 15px;
                .border(0 0 1px 1px; solid; #scheme[background]; 0 2px 0 0;);

                &:hover{
                    background-color: #scheme.input.hover[background];
                }
                &:before{
                    .border(0 4px 5px 4px; solid; @alpha @alpha #scheme.input[foreground] @alpha;);
                }
            }
            &.step-down{
                top: 29px;
                .border(1px 0 0 1px; solid; #scheme[background]; 0 0 2px 0;);

                &:hover{
                    background-color: #scheme.input.hover[background];
                }
                &:before{
                    .border(5px 4px 0 4px; solid; #scheme.input[foreground] @alpha @alpha @alpha;);
                }
            }
        }
        input:focus{
            & + button.step-up{
                border-color: fadeout(white, 20%);
                background-color: @color[secondary];

                &:hover{
                    background-color: darken(@color[secondary], 10%);
                }
                &:before{
                    border-bottom-color: white;
                }
            }
            & + button + button.step-down{
                border-color: fadeout(white, 20%);
                background-color: @color[secondary];

                &:hover{
                    background-color: darken(@color[secondary], 10%);
                }
                &:before{
                    border-top-color: white;
                }
            }
        }
        input:disabled{
            & + button.step-up{
                cursor: not-allowed;
                border-color: fadeout(white, 20%);
                background-color: #scheme.input.disabled[background];

                &:hover{
                    background-color: #scheme.input.disabled[background];
                }
                &:before{
                    border-bottom-color: #scheme.input.disabled[foreground];
                }
            }
            & + button + button.step-down{
                cursor: not-allowed;
                border-color: fadeout(white, 20%);
                background-color: #scheme.input.disabled[background];

                &:hover{
                    background-color: #scheme.input.disabled[background];
                }
                &:before{
                    border-top-color: #scheme.input.disabled[foreground];
                }
            }
        }
        label{
            color: #scheme.input[foreground];
            margin: 0;
            padding: 0;
            display: block;
            font-size: 12px;
            text-align: center;
        }
    }
    label.timepicker-switch{
        cursor: pointer;
        margin: 15px 0 -5px 0;
        display: block;
        text-align: center;
        vertical-align: top;

        &:before, &:after{
            width: auto;
            margin: 0;
            padding: 0 5px;
            font-size: 12px;
            line-height: 16px;
            vertical-align: top;
        }
        &:before{
            content: attr(data-am);
        }
        &:after{
            content: attr(data-pm);
        }
        input[type="checkbox"]{
            display: none;

            & + span{
                display: inline-block;
                position: relative;
                vertical-align: top;

                &:before{
                    width: 50px;
                    height: 16px;
                    content: "";
                    display: inline-block;
                    vertical-align: top;
                    .border(1px; solid; @color[primary]; 14px;);
                    .transition(border 284ms linear;);
                }
                &:after{
                    top: 3px;
                    left: 4px;
                    right: 30px;
                    width: auto;
                    height: 10px;
                    margin: 0;
                    padding: 0;
                    content: "";
                    display: inline-block;
                    position: absolute;
                    background-color: @color[primary];
                    border-radius: 15px;
                    vertical-align: top;
                    .transition(left 284ms linear, right 284ms linear 284ms, background 284ms linear;);
                }
            }
            &:checked + span{
                &:before{
                    border-color: @color[secondary];
                }
                &:after{
                    left: 30px;
                    right: 4px;
                    background-color: @color[secondary];
                    .transition(right 284ms linear, left 284ms linear 284ms, background 284ms linear;);
                }
            }
        }
    }
}
.tail-datetime-calendar .calendar-actions + .calendar-timepicker{
    border-width: 0;
}
/* @end CALENDAR TIMEPICKER */

/* @start RTL */
.tail-datetime-calendar.rtl{
    direction: rtl;

    .calendar-actions span.action-next,
    .calendar-actions span.action-prev{
        transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }
    .calendar-datepicker table tr td.date-disabled:after{
        right: 3px;
        transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
    .calendar-datepicker table tr td.date-today:before{
        right: 5px;
    }
    .calendar-datepicker table tr td .tooltip-tick{
        left: 5px;
    }
    .calendar-datepicker table tr td.calendar-month.date-today:before,
    .calendar-datepicker table tr td.calendar-year.date-today:before,
    .calendar-datepicker table tr td.calendar-decade.date-today:before{
        right: 50%;
        margin-right: -2.5px;
    }
    .calendar-datepicker table tr td.calendar-month:hover span.inner:before,
    .calendar-datepicker table tr td.calendar-year:hover span.inner:before,
    .calendar-datepicker table tr td.calendar-decade:hover span.inner:before{
        right: 6px;
        border-right-color: #cccccc;
    }
    .calendar-datepicker table tr td.calendar-month span.inner:after,
    .calendar-datepicker table tr td.calendar-year span.inner:after,
    .calendar-datepicker table tr td.calendar-decade span.inner:after{
        left: 0;
    }
    .calendar-datepicker table tr td.calendar-month:hover span.inner:after,
    .calendar-datepicker table tr td.calendar-year:hover span.inner:after,
    .calendar-datepicker table tr td.calendar-decade:hover span.inner:after{
        left: 6px;
        border-left-color: #cccccc;
    }
    .calendar-datepicker table tr td.calendar-decade span.inner{
        text-align: right;
    }
    .calendar-timepicker .timepicker-field:first-child{
        text-align: left;
        padding-left: 0;
        padding-right: 25px;
    }
    .calendar-timepicker .timepicker-field:last-child{
        text-align: right;
        padding-left: 25px;
        padding-right: 0;
    }
    .calendar-timepicker .timepicker-field:first-child input[type="text"]{
        margin-left: -1px;
        margin-right: 0;
        border-radius: 0 3px 3px 0;
    }
    .calendar-timepicker .timepicker-field:last-child input[type="text"]{
        margin-left: 0;
        margin-right: -1px;
        border-radius: 3px 0 0 3px;
    }
}
/* @end RTL */