@import '../../styles/variables';
@import 'pikaday';

/**************************************
 * Date Picker
 **************************************/

.date-picker-wrapper {
    position: relative;
    margin: 0 0 20px;

    button:focus {
        outline: none;
    }

    .date-picker-icon-holder {
        position: relative;
        display: inline-block;
    }

    .date-picker-description {
        color: $bdl-gray-65;
    }

    .date-picker-input {
        min-width: 160px;
        height: 32px;
        margin-top: 5px;
        margin-bottom: 0;
        padding-right: 6px;
        text-overflow: ellipsis;

        &::-webkit-calendar-picker-indicator {
            display: none;
        }
    }

    .date-picker-input:focus ~ .tooltip,
    .date-picker-input:focus ~ .bdl-Tooltip,
    .date-picker-unix-time-input {
        display: none;
    }

    .date-picker-open-btn {
        position: absolute;
        right: 7px;
        bottom: 8px;
        display: inline-flex;
        background-color: $white;
    }

    .date-picker-open-btn:hover {
        cursor: pointer;
    }

    .date-picker-clear-btn,
    .date-picker-icon-alert {
        position: absolute;
        right: 30px;
        bottom: 8px;
        display: inline-flex;

        span {
            display: inline-block;
        }
    }

    .date-picker-clear-btn {
        path {
            transition: fill linear .1s;
            fill: $bdl-gray-50;
        }
    }

    > .date-picker-clear-btn:hover,
    > .date-picker-clear-btn:focus {
        path {
            fill: $bdl-gray-80;
        }
    }

    > .date-picker-open-btn:disabled {
        cursor: default;
    }

    > .date-picker-open-btn:hover:enabled,
    > .date-picker-open-btn:focus:enabled {
        .fill-color {
            fill: $bdl-gray-80;
        }
    }

    .date-picker-clear-btn:focus,
    .date-picker-open-btn:focus {
        margin: -1px;
        border: 1px solid $bdl-box-blue;
        border-radius: $bdl-border-radius-size;
    }

    .date-picker-icon-alert {
        path {
            fill: $bdl-watermelon-red;
        }
    }

    &.show-error {
        .date-picker-input {
            border-color: $bdl-watermelon-red;
        }
    }

    &.show-clear-btn.show-error {
        .date-picker-clear-btn {
            right: 25px;
        }

        .date-picker-icon-alert {
            right: 42px;
        }
    }
}