//
// 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: #b0bec5 !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: #000 !default;
$daterangepicker-in-range-border-color: transparent !default;
$daterangepicker-in-range-bg-color: #ebf4f8 !default;

$daterangepicker-active-color: #fff !default;
$daterangepicker-active-bg-color: #357ebd !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: 4px !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: #08c !default;
$daterangepicker-control-active-border-radius: $daterangepicker-control-border-radius !default;

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

//
// Ranges
$daterangepicker-ranges-color: #08c !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;
    // TODO: Should these be parameterized??
    top: 100px;
    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;
        width: 257px;
        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;
        }
    }
    .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)
    //
    .input-mini {
        border: $daterangepicker-control-border-size solid $daterangepicker-control-border-color;
        border-radius: $daterangepicker-control-border-radius;
        color: $daterangepicker-control-color;
        height: $daterangepicker-control-line-height;
        line-height: $daterangepicker-control-height;
        display: block;
        vertical-align: middle;
        // TODO: Should these all be static, too??
        margin: 0 0 5px 0;
        padding: 0 6px 0 28px;
        width: 100%;
        &.active {
            border: $daterangepicker-control-active-border-size solid $daterangepicker-control-active-border-color;
            border-radius: $daterangepicker-control-active-border-radius;
        }
    }
    .daterangepicker_input {
        position: relative;
        i {
            position: absolute;
            // NOTE: These appear to be eyeballed to me...
            left: 8px;
            top: 8px;
        }
    }
    &.rtl {
        .input-mini {
            padding-right: 28px;
            padding-left: 6px;
        }
        .daterangepicker_input i {
            left: auto;
            right: 8px;
        }
    }
    //
    // 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;
        //width: 257px;
        .ranges {
            ul {
                width: 160px;
            }
        }
        &.single {
            .ranges {
                ul {
                    width: 100%;
                }
            }
            .calendar.left {
                clear: none;
            }
            &.ltr {
                .ranges, .calendar {
                    float: left;
                }
            }
            &.rtl {
                .ranges, .calendar {
                    float: right;
                }
            }
        }
        &.ltr {
            direction: ltr;
            text-align: left;
            .calendar {
                &.left {
                    clear: left;
                    margin-right: 0;
                    .calendar-table {
                        border-right: none;
                        border-top-right-radius: 0;
                        border-bottom-right-radius: 0;
                    }
                }
                &.right {
                    margin-left: 0;
                    .calendar-table {
                        border-left: none;
                        border-top-left-radius: 0;
                        border-bottom-left-radius: 0;
                    }
                }
            }
            .left .daterangepicker_input {
                padding-right: 12px;
            }
            .calendar.left .calendar-table {
                padding-right: 12px;
            }
            .ranges, .calendar {
                float: left;
            }
        }
        &.rtl {
            direction: rtl;
            text-align: right;
            .calendar {
                &.left {
                    clear: right;
                    margin-left: 0;
                    .calendar-table {
                        border-left: none;
                        border-top-left-radius: 0;
                        border-bottom-left-radius: 0;
                    }
                }
                &.right {
                    margin-right: 0;
                    .calendar-table {
                        border-right: none;
                        border-top-right-radius: 0;
                        border-bottom-right-radius: 0;
                    }
                }
            }
            .left .daterangepicker_input {
                padding-left: 12px;
            }
            .calendar.left .calendar-table {
                padding-left: 12px;
            }
            .ranges, .calendar {
                text-align: right;
                float: right;
            }
        }
    }
}
@media (min-width: 730px) {
    .#{$prefix-class} {
        .ranges {
            width: auto;
        }
        &.ltr {
            .ranges {
                float: left;
            }
        }
        &.rtl {
            .ranges {
                float: right;
            }
        }
        .calendar.left {
            clear: none !important;
        }
    }
}