/* ------------------------------------------------------------------------------
 *
 *  # Daterange picker
 *
 *  Date range picker component for Bootstrap
 *
 *  Version: 1.1
 *  Latest update: Oct 20, 2015
 *
 * ---------------------------------------------------------------------------- */


// Core
// ------------------------------

.daterangepicker {
    position: absolute;
    left: 0;
    margin-top: 5px;
    width: auto;
    padding: 0;

    // Override default dropdown styles
    &.dropdown-menu {
        max-width: none;
        background-color: transparent;
        border: 0;
        z-index: @zindex-dropdown;
        .box-shadow(none);
    }

    // Dropup
    &.dropup {
        margin-top: -(@list-spacing);
    }

    // Align containers
    .ranges,
    .calendar {
        float: left;
    }

    // Display calendars on left side
    &.opensleft {
        .calendars {
            float: left;
        }
    }

    // Display calendars on right side
    &.opensright {
        .calendars {
            float: right;
        }
    }

    // And remove floats in single picker
    &.single {
        .ranges,
        .calendar {
            float: none;
            margin-left: 0;
            margin-right: 0;
        }
    }

    // Display calendars
    &.show-calendar .calendar {
        display: block;
    }

    // Calendar
    .calendar {
        display: none;
        background-color: @dropdown-bg;
        border: 1px solid @dropdown-border;
        border-radius: @border-radius-base;
        margin: @list-spacing;
        padding: (@list-spacing * 2);
    }
}


// Table
// ------------------------------

.daterangepicker {

    // Table defaults
    table {
        width: 100%;
        margin: 0;

        tbody {
            th,
            td {
                cursor: pointer;
            }
        }
    }

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

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

    // Header
    th {
        color: @text-muted;
        font-weight: normal;
        font-size: @font-size-small;
        min-width: (@icon-font-size + (@padding-xs-horizontal * 2));

        // Icons
        > i {
            top: 0;
            color: @color-grey-400;
        }

        // Arrow buttons
        &.prev,
        &.next {
            cursor: pointer;
        }

        // Available dates
        &.available {
            &:hover,
            &:focus {
                > i {
                    color: @text-color;
                }
            }
        }
    }

    // Table content cells
    td {

        &.available {
            &:hover,
            &:focus {
                background-color: @dropdown-link-hover-bg;
            }
        }

        &.off,
        &.disabled {
            color: #ccc;
        }

        &.disabled {
            cursor: @cursor-disabled;
        }

        // Highlight dates in range
        &.in-range {
            background-color: @dropdown-link-hover-bg;
        }

        // Active date
        &.active {
            &,
            &:hover,
            &:focus {
                background-color: @color-teal-400;
                color: #fff;
                border-radius: @border-radius-small;
            }
        }
    }

    // Override default condensed styles
    .table-condensed {
        tr > th,
        tr > td {
            padding: @padding-xs-horizontal;
            line-height: 1;
        }

        // Month heading
        .month {
            font-size: @font-size-h6;
            line-height: 1;
            color: @text-color;
            padding-top: @content-padding-base;
            padding-bottom: @content-padding-base;
            font-weight: 400;
        }
    }
}


// Elements
// ------------------------------

.daterangepicker {

    // Selects
    select {
        display: inline-block;

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

        &.yearselect {
            width: 40%;
        }

        &.hourselect,
        &.minuteselect,
        &.secondselect,
        &.ampmselect {
            width: 60px;
            padding-left: 0;
            padding-right: 0;
            margin-bottom: 0;
        }
    }

    // Text inputs
    .daterangepicker_input {
        position: relative;

        // Calendar icons
        i {
            position: absolute;
            right: @padding-small-horizontal;
            top: auto;
            bottom: ((@icon-font-size / 2) + 2); // half icon size + borders
            color: @text-muted;
        }

        // Add right padding for inputs
        input {
            padding-left: @padding-small-horizontal;
            padding-right: (@padding-small-horizontal + @icon-font-size + @padding-base-vertical);
        }
    }

    // Time picker
    .calendar-time {
        text-align: center;
        margin: @padding-base-horizontal 0;

        // Disabled state
        select.disabled {
            color: #ccc;
            cursor: @cursor-disabled;
        }
    }
}


// Ranges dropdown
// ------------------------------

.ranges {
    background-color: @dropdown-bg;
    position: relative;
    border: 1px solid @dropdown-border;
    border-radius: @border-radius-base;
    width: 200px;
    margin-top: @list-spacing;
    
    // Remove left margin if on right side
    .opensright & {
        margin-left: 0;
    }

    // Remove left margin if on left side
    .opensleft & {
        margin-right: 0;
    }

    // List with links
    ul {
        list-style: none;
        margin: 0;
        padding: @list-spacing 0;

        // Add top border
        & + .daterangepicker-inputs {
            border-top: 1px solid @dropdown-divider-bg;
        }

        // List item
        li {
            color: @text-color;
            padding: (@padding-base-vertical + 1) @padding-base-horizontal;
            cursor: pointer;
            margin-top: 1px;

            &:first-child {
                margin-top: 0;
            }

            // Hover bg color
            &:hover,
            &:focus {
                background-color: @dropdown-link-hover-bg;
            }

            // Active item color
            &.active {
                color: @dropdown-link-active-color;
                background-color: @color-teal-400;
            }
        }
    }

    // Text inputs
    .daterangepicker-inputs {
        padding: @padding-base-horizontal;
        padding-top: @padding-base-horizontal + @list-spacing; // we need to match menu vertical spacing

        // Inputs container
        .daterangepicker_input {

            // Add top margin to the second field
            & + .daterangepicker_input {
                margin-top: @padding-base-horizontal + @list-spacing;;
            }

            // Text label
            > span {
                display: block;
                font-size: @font-size-small;
                margin-bottom: @padding-base-vertical;
                color: @text-muted;
            }
        }

        // Add top divider
        & + .range_inputs {
            border-top: 1px solid @dropdown-divider-bg;
        }
    }

    // Buttons area
    .range_inputs {
        padding: @padding-base-horizontal;

        // Buttons
        .btn {
            display: block;
            width: 100%;
        }
        .btn + .btn {
            margin-top: @padding-base-horizontal;
        }
    }


    // Setup mobile view
    @media (min-width: @screen-sm) {
        margin: @list-spacing;
    }
}


// Custom ranges layout
// ------------------------------

// Container
.daterange-custom {
    cursor: pointer;

    // Clearing floats
    &:after {
        content: '';
        display: table;
        clear: both;
    }

    // Labels and badges
    .label,
    .badge {
        margin: 4px 0 0 @element-horizontal-spacing;
        vertical-align: top;
    }
    .label-icon {
        margin-top: 0;
        margin-right: 5px;
    }
}

// Layout
.daterange-custom-display {
    display: inline-block;
    position: relative;
    padding-left: (@icon-font-size + 5);
    line-height: 1;

    // Arrow icon
    &:after {
        content: '\e9c9';
        font-family: 'icomoon';
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -(@icon-font-size / 2);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        .transition(all ease-in-out 0.2s);

        // Rotate if open/closed
        .daterange-custom.is-opened & {
            .rotate(180deg);
        }
    }

    // Date number
    > i {
        display: inline-block;
        font-size: 28px;
        font-weight: normal;
        font-style: normal;
        letter-spacing: @heading-letter-spacing;
    }

    // Date details
    b {
        display: inline-block;
        margin-left: 4px;
        font-weight: 400;

        // Month/year
        > i {
            font-size: @font-size-mini;
            display: block;
            line-height: @font-size-small;
            text-transform: uppercase;
            font-style: normal;
            font-weight: 400;
        }
    }

    // Line divider
    em {
        line-height: 30px;
        vertical-align: top;
        margin: 0 4px;
    }
}


// Setup mobile view
// ------------------------------

@media (max-width: @screen-sm) {

    // Layout
    .opensleft,
    .opensright {
        left: 0!important;
        right: 0;

        // Stack calendars container
        .calendars {
            float: none;
        }

        // Stack elements
        .daterangepicker& {
            .ranges,
            .calendar,
            .calendars {
                float: none;
            }
        }
    }

    // Elements
    .daterangepicker {
        width: 100%;
        padding-left: @grid-gutter-width;
        padding-right: @grid-gutter-width;

        // Remove side margin from calendars
        .calendar {
            margin-left: 0;
            margin-right: 0;
        }

        // Make ranges full width
        .ranges {
            width: 100%;
        }
    }
}
