@import (once) "../../include/vars";
@import (once) "../../include/mixins";

.calendar-picker {
    position: relative;
}

.calendar-picker {
    input {
        width: 100%;
    }
    
    .input-calendar-button, .input-clear-button {
        font-family: "Segoe UI Symbol", serif;
    }
}

.calendar-picker {
    .calendar-wide {
        width: 464px;
        &.compact {
            width: 364px;
        }
    }
}

.calendar-for-picker {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    z-index: @z-index-absolute;

    &.open {
        display: block!important;
    }

    &.open-up {
        top: auto;
        bottom: 100%;
    }

    &.dialog-mode {
        position: fixed;
        top: 50%!important;
        left: 50%!important;
        .translate3d(-50%, -50%, 0);
        z-index: @z-index-modal;

        &.open-up {
            top: auto;
            bottom: auto;
        }
    }
}