@import '../styles/_variables.scss';

.datePickerWrapper {
    outline: none;
    border: $default-border;
    border-radius: $default-border-radius;
    display: flex;
    align-items: center;
    .calendarIcon {
        flex-grow: 0;
        fill: #617379;
        margin-inline-start: 5px;
    }
    input {
        padding-block-start: 5px;
        padding-inline-end: 5px;
        padding-block-end: 5px;
        padding-inline-start: 5px;
        font-family: $duda-font;
        text-align: start;
        font-size: 13px;
        min-width: 90px;
        width: 100%;
        background-color: inherit;
    }

    &:global(.noBorder) {
        input {
            box-shadow: none;
            border: 0 none;
        }
    }

    :global(.react-datepicker__navigation--next.react-datepicker__navigation--next--with-time) {
        right: 95px;
    }

    [dir='rtl'] & {
        :global(.react-datepicker__navigation--previous) {
            left: auto;
            right: 10px;
            transform: scaleX(-1);
        }

        :global(.react-datepicker__navigation--next) {
            right: auto;
            left: 10px;
            transform: scaleX(-1);
        }
    }
}