//
// A stylesheet for use with Bootstrap 3.x
// @author: Dan Grossman http://www.dangrossman.info/
// @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved.
// @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
// @website: https://www.improvely.com/
//

//
// VARIABLES
//

//
// Settings

// The class name to contain everything within.
$prefix-class: daterangepicker;
$arrow-size:         7px !default;

//
// Colors
$daterangepicker-color:                                            inherit !default;
$daterangepicker-bg-color:                                     #fff !default;

$daterangepicker-cell-color:                                 $daterangepicker-color !default;
$daterangepicker-cell-border-color:                    transparent !default;
$daterangepicker-cell-bg-color:                            $daterangepicker-bg-color !default;

$daterangepicker-cell-hover-color:                     $daterangepicker-color !default;
$daterangepicker-cell-hover-border-color:        $daterangepicker-cell-border-color !default;
$daterangepicker-cell-hover-bg-color:                #eee !default;

$daterangepicker-in-range-color:                         white !default;
$daterangepicker-in-range-border-color:            transparent !default;
$daterangepicker-in-range-bg-color:                    $teal-color !default;

$daterangepicker-active-color:                             #fff !default;
$daterangepicker-active-bg-color:                        $primary-color !default;
$daterangepicker-active-border-color:                transparent !default;

$daterangepicker-unselected-color:                     #999 !default;
$daterangepicker-unselected-border-color:        transparent !default;
$daterangepicker-unselected-bg-color:                #fff !default;

//
// daterangepicker
$daterangepicker-width:                    278px !default;
$daterangepicker-padding:                4px !default;
$daterangepicker-z-index:                3000 !default;

$daterangepicker-border-size:        1px !default;
$daterangepicker-border-color:     #ccc !default;
$daterangepicker-border-radius:    0px !default;


//
// Calendar
$daterangepicker-calendar-margin:                            $daterangepicker-padding !default;
$daterangepicker-calendar-bg-color:                        $daterangepicker-bg-color !default;

$daterangepicker-calendar-border-size:                 1px !default;
$daterangepicker-calendar-border-color:                $daterangepicker-bg-color !default;
$daterangepicker-calendar-border-radius:             $daterangepicker-border-radius !default;

//
// Calendar Cells
$daterangepicker-cell-size:                     20px !default;
$daterangepicker-cell-width:                    $daterangepicker-cell-size !default;
$daterangepicker-cell-height:                 $daterangepicker-cell-size !default;

$daterangepicker-cell-border-radius:    $daterangepicker-calendar-border-radius !default;
$daterangepicker-cell-border-size:        1px !default;

//
// Dropdowns
$daterangepicker-dropdown-z-index: $daterangepicker-z-index + 1 !default;

//
// Controls
$daterangepicker-control-height:                             30px !default;
$daterangepicker-control-line-height:                    $daterangepicker-control-height !default;
$daterangepicker-control-color:                                #555 !default;

$daterangepicker-control-border-size:                    1px !default;
$daterangepicker-control-border-color:                 #ccc !default;
$daterangepicker-control-border-radius:                4px !default;

$daterangepicker-control-active-border-size:     1px !default;
$daterangepicker-control-active-border-color:    $teal-color !default;
$daterangepicker-control-active-border-radius: $daterangepicker-control-border-radius !default;

$daterangepicker-control-disabled-color:             #ccc !default;

//
// Ranges
$daterangepicker-ranges-color:                                $primary-color !default;
$daterangepicker-ranges-bg-color:                         #f5f5f5 !default;

$daterangepicker-ranges-border-size:                    1px !default;
$daterangepicker-ranges-border-color:                 $daterangepicker-ranges-bg-color !default;
$daterangepicker-ranges-border-radius:                $daterangepicker-border-radius !default;

$daterangepicker-ranges-hover-color:                    #fff !default;
$daterangepicker-ranges-hover-bg-color:             $daterangepicker-ranges-color !default;
$daterangepicker-ranges-hover-border-size:        $daterangepicker-ranges-border-size !default;
$daterangepicker-ranges-hover-border-color:     $daterangepicker-ranges-hover-bg-color !default;
$daterangepicker-ranges-hover-border-radius:    $daterangepicker-border-radius !default;

$daterangepicker-ranges-active-border-size:     $daterangepicker-ranges-border-size !default;
$daterangepicker-ranges-active-border-color:    $daterangepicker-ranges-bg-color !default;
$daterangepicker-ranges-active-border-radius: $daterangepicker-border-radius !default;

//
// STYLESHEETS
//
.#{$prefix-class} {
    position: absolute;
    color: $daterangepicker-color;
    background-color: $daterangepicker-bg-color;
    border-radius: $daterangepicker-border-radius;
    width: $daterangepicker-width;
    padding: $daterangepicker-padding;
    margin-top: $daterangepicker-border-size;
    @include bs3();

    // TODO: Should these be parameterized??
    top: -99999px;
    left: 20px;

    $arrow-prefix-size: $arrow-size;
    $arrow-suffix-size: ($arrow-size - $daterangepicker-border-size);

    &:before, &:after {
        position: absolute;
        display: inline-block;

        border-bottom-color: rgba(0, 0, 0, 0.2);
        content: '';
    }

    &:before {
        top: -$arrow-prefix-size;

        border-right: $arrow-prefix-size solid transparent;
        border-left: $arrow-prefix-size solid transparent;
        border-bottom: $arrow-prefix-size solid $daterangepicker-border-color;
    }

    &:after {
        top: -$arrow-suffix-size;

        border-right: $arrow-suffix-size solid transparent;
        border-bottom: $arrow-suffix-size solid $daterangepicker-bg-color;
        border-left: $arrow-suffix-size solid transparent;
    }

    &.opensleft {
        &:before {
            // TODO: Make this relative to prefix size.
            right: $arrow-prefix-size + 2px;
        }

        &:after {
            // TODO: Make this relative to suffix size.
            right: $arrow-suffix-size + 4px;
        }
    }

    &.openscenter {
        &:before {
            left: 0;
            right: 0;
            width: 0;
            margin-left: auto;
            margin-right: auto;
        }

        &:after {
            left: 0;
            right: 0;
            width: 0;
            margin-left: auto;
            margin-right: auto;
        }
    }

    &.opensright {
        &:before {
            // TODO: Make this relative to prefix size.
            left: $arrow-prefix-size + 2px;
        }

        &:after {
            // TODO: Make this relative to suffix size.
            left: $arrow-suffix-size + 4px;
        }
    }

    &.dropup {
        margin-top: -5px;

        // NOTE: Note sure why these are special-cased.
        &:before {
            top: initial;
            bottom: -$arrow-prefix-size;
            border-bottom: initial;
            border-top: $arrow-prefix-size solid $daterangepicker-border-color;
        }

        &:after {
            top: initial;
            bottom:-$arrow-suffix-size;
            border-bottom: initial;
            border-top: $arrow-suffix-size solid $daterangepicker-bg-color;
        }
    }

    &.dropdown-menu {
        max-width: none;
        z-index: $daterangepicker-dropdown-z-index;
    }

    &.single {
        .ranges, .calendar {
            float: none;
        }
    }

    /* Calendars */
    &.show-calendar {
        .calendar {
            display: block;
        }
    }

    .calendar {
        display: none;
        max-width: $daterangepicker-width - ($daterangepicker-calendar-margin * 2);
        margin: $daterangepicker-calendar-margin;

        &.single {
            .calendar-table {
                border: none;
            }
        }

        th, td {
            white-space: nowrap;
            text-align: center;

            // TODO: Should this actually be hard-coded?
            min-width: 32px;
            padding: 2px;
        }
    }

    .calendar-table {
        border: $daterangepicker-calendar-border-size solid $daterangepicker-calendar-border-color;
        padding: $daterangepicker-calendar-margin;
        border-radius: $daterangepicker-calendar-border-radius;
        background-color: $daterangepicker-calendar-bg-color;
    }

    table {
        width: 100%;
        margin: 0;
    }

    td, th {
        text-align: center;
        width: $daterangepicker-cell-width;
        height: $daterangepicker-cell-height;
        border-radius: $daterangepicker-cell-border-radius;
        border: $daterangepicker-cell-border-size solid $daterangepicker-cell-border-color;
        white-space: nowrap;
        cursor: pointer;

        &.available {
            &:hover {
                background-color: $daterangepicker-cell-hover-bg-color;
                border-color: $daterangepicker-cell-hover-border-color;
                color: $daterangepicker-cell-hover-color;
            }
        }

        &.week {
            font-size: 80%;
            color: #ccc;
        }
    }

    td {
        &.off {
            &, &.in-range, &.start-date, &.end-date {
                background-color: $daterangepicker-unselected-bg-color;
                border-color: $daterangepicker-unselected-border-color;
                color: $daterangepicker-unselected-color;
            }
        }

        //
        // Date Range
        &.in-range {
            background-color: $daterangepicker-in-range-bg-color;
            border-color: $daterangepicker-in-range-border-color;
            color: $daterangepicker-in-range-color;

            // TODO: Should this be static or should it be parameterized?
            border-radius: 0;
        }

        &.start-date {
            border-radius: $daterangepicker-cell-border-radius 0 0 $daterangepicker-cell-border-radius;
        }

        &.end-date {
            border-radius: 0 $daterangepicker-cell-border-radius $daterangepicker-cell-border-radius 0;
        }

        &.start-date.end-date {
            border-radius: $daterangepicker-cell-border-radius;
        }

        &.active {
            &, &:hover {
                background-color: $daterangepicker-active-bg-color;
                border-color: $daterangepicker-active-border-color;
                color: $daterangepicker-active-color;
            }
        }
    }

    th {
        &.month {
            width: auto;
        }
    }

    //
    // Disabled Controls
    //
    td, option {
        &.disabled {
            color: #999;
            cursor: not-allowed;
            text-decoration: line-through;
        }
    }

    select {
        &.monthselect, &.yearselect {
            font-size: 12px;
            padding: 1px;
            height: auto;
            margin: 0;
            cursor: default;
        }

        &.monthselect {
            margin-right: 2%;
            width: 56%;
        }

        &.yearselect {
            width: 40%;
        }

        &.hourselect, &.minuteselect, &.secondselect, &.ampmselect {
            width: 50px;
            margin-bottom: 0;
        }
    }

    //
    // Text Input Controls (above calendar)
    //

    .daterangepicker_input {
        position: relative;

        i {
            position: absolute;

            // NOTE: These appear to be eyeballed to me...
            left: 8px;
            top: 12px;
        }
        
        > input {
            padding-left: 35px;
            width: auto;
        }
    }

    //
    // Time Picker
    //
    .calendar-time {
        text-align: center;
        margin: 5px auto;
        line-height: $daterangepicker-control-line-height;
        position: relative;
        padding-left: 28px;

        select {
            &.disabled {
                color: $daterangepicker-control-disabled-color;
                cursor: not-allowed;
            }
        }
    }
}

//
// Predefined Ranges
//

.ranges {
    font-size: 11px;
    float: none;
    margin: 4px;
    text-align: left;

    ul {
        list-style: none;
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }

    li {
        font-size: 13px;
        background-color: $daterangepicker-ranges-bg-color;
        border: $daterangepicker-ranges-border-size solid $daterangepicker-ranges-border-color;
        border-radius: $daterangepicker-ranges-border-radius;
        color: $daterangepicker-ranges-color;
        padding: 3px 12px;
        margin-bottom: 8px;
        cursor: pointer;

        &:hover {
            background-color: $daterangepicker-ranges-hover-bg-color;
            border: $daterangepicker-ranges-hover-border-size solid $daterangepicker-ranges-hover-border-color;
            color: $daterangepicker-ranges-hover-color;
        }

        &.active {
            background-color: $daterangepicker-ranges-hover-bg-color;
            border: $daterangepicker-ranges-hover-border-size solid $daterangepicker-ranges-hover-border-color;
            color: $daterangepicker-ranges-hover-color;
        }
    }
}

/*    Larger Screen Styling */
@media (min-width: 564px) {
    .#{$prefix-class} {
        width: auto;

        .ranges {
            ul {
                width: 160px;
            }
        }

        &.single {
            .ranges {
                ul {
                    width: 100%;
                }
            }
        }

        
        
    }
}

@media (min-width: 730px) {
    .#{$prefix-class} {
        .ranges {
            width: auto;
        }
        &.ltr {
            .ranges {
                float: left;
            }
        }
        &.rtl {
            .ranges {
                float: right;
            }
        }

        .calendar.left {
            clear: none !important;
        }
    }
}