dateinput.less

.ffe-dateinput {
    position: relative;
    display: inline-block;
    grid-column: 1 e('/') 3;
    grid-row: 1 e('/') -1;
    min-width: 210px;

    &--full-width {
        display: block;
    }

    &:focus-within {
        border: var(--ffe-g-border-width-focus) solid var(--ffe-g-primary-color);
        outline: none;

        & + .ffe-datepicker__button {
            @media (hover: hover) and (pointer: fine) {
                &:hover {
                    border: var(--ffe-g-border-width-focus) solid
                        var(--ffe-g-primary-color);
                    outline: none;
                }
            }
        }
    }

    &.ffe-input-field {
        display: flex;
        align-items: center;

        &--invalid {
            border: var(--ffe-g-border-width) solid var(--ffe-g-error-color);

            @media (hover: hover) and (pointer: fine) {
                &:hover {
                    border-color: var(--ffe-g-error-color);
                }
                &:focus-within:hover {
                    border: var(--ffe-g-border-width-focus) solid
                        var(--ffe-g-error-color);
                }
            }

            &:focus-within {
                border: var(--ffe-g-border-width-focus) solid
                    var(--ffe-g-error-color);
                outline: none;
            }

            & + .ffe-datepicker__button {
                &:focus-visible {
                    border-color: var(--ffe-g-error-color);
                    border-style: solid;
                }

                @media (hover: hover) and (pointer: fine) {
                    &:hover {
                        border: var(--ffe-g-border-width-focus) solid
                            var(--ffe-g-error-color);
                        outline: none;
                    }
                }
            }
        }
    }

    &__field {
        padding-block: var(--ffe-spacing-2xs);

        &-year {
            min-width: 4ch;
        }

        &:focus {
            background-color: var(--ffe-v-datepicker-spinbutton-hover-color);
            outline: none;
        }

        &::-ms-clear {
            display: none;
        }
    }
    &--message {
        padding-bottom: 0;
    }
}

.ffe-datepicker {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    width: fit-content;

    &--full-width {
        width: 100%;
    }

    &__button {
        background-color: transparent;
        border: var(--ffe-g-border-width) solid transparent;
        grid-column: 2 e('/') 3;
        grid-row: 1 e('/') -1;
        outline: none;
        border-radius: 0 var(--ffe-g-border-radius) var(--ffe-g-border-radius) 0;
        transition: border-color var(--ffe-transition-duration) var(--ffe-ease);
        width: 56px;
        cursor: pointer;
        isolation: isolate;

        &:focus,
        &:active {
            border: var(--ffe-g-border-width-focus) solid
                var(--ffe-v-datepicker-border-hover-color);
        }

        @media (hover: hover) and (pointer: fine) {
            &:hover {
                border-color: var(--ffe-v-datepicker-border-hover-color);
            }
        }
    }

    &__icon.ffe-icons {
        vertical-align: middle;
        color: var(--ffe-v-datepicker-icon-color);
        transition: color var(--ffe-transition-duration) var(--ffe-ease);

        @media (hover: hover) and (pointer: fine) {
            &:hover {
                color: var(--ffe-v-datepicker-icon-color-hover);
            }
        }
    }
}