//
// Dependencies
// --------------------------------------------------

@import "global.less";

//
// Date Picker
// --------------------------------------------------

@import "datepicker.date.less";
@import "datepicker.time.less";

.field-datepicker {

}

.pika-single {
    border-radius: @border-radius-base;
    font-size: 12px;
    margin-top: 5px;
    z-index: @zindex-datepicker;
    font-family: @font-family-sans-serif;
    width: 310px;

    &.is-bound {
        .box-shadow(@overlay-box-shadow);
    }

    abbr {
        border-bottom: none;
    }
    .pika-button {
        border-radius: 999px !important;
        text-align: center;
        width: 29px;
        height: 29px;
        margin: 3px;
        background: transparent;
    }
    .is-today .pika-button {
        background: #ddd;
        font-weight: bold;
        color: @color-datepicker-today-text;
    }

    .is-selected .pika-button {
        box-shadow: none;
        background: @color-datepicker-selected-bg;
    }

    .pika-button:hover {
        color: @color-datepicker-hover-text !important;
        background: @color-datepicker-hover-bg !important;
    }

    .pika-label {
        font-weight: normal;
    }

    .pika-table th {
        text-transform: uppercase;
        font-weight: normal;
        line-height: 30px;
        font-size: @font-size-base - 3;
    }

    .pika-footer {
        .pika-label {
            font-size: @font-size-base - 3;
        }
    }
}

.clockpicker-popover {
    z-index: @zindex-datepicker;
    .box-shadow(@overlay-box-shadow);
    border-radius: @border-radius-base;

    .popover-title {
        font-size: 20px;
        font-weight: normal;
        border: none;
    }

    &.top {
        margin-top: -5px;
    }
    &.right {
        margin-left: 5px;
    }
    &.bottom {
        margin-top: 5px;
    }
    &.left {
        margin-left: -5px;
    }

    > .arrow {
        display: none;
    }
}

.clockpicker-plate {
    border: none;
}

.clockpicker-hours .clockpicker-tick {
    font-size: 12px;

    &.tick-inner {
        font-size: 16px;
    }
}
.clockpicker-minutes .clockpicker-tick {
    font-size: 16px;
}