dateinput.less

.ffe-input-group {
    > .ffe-form-label {
        color: var(--ffe-color-foreground-default) !important;
    }
}

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

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

    &:focus-within {
        border: 2px solid var(--ffe-color-border-interactive-focus);
        outline: none;

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

    &.ffe-input-field {
        display: flex;
        align-items: center;
        border: 2px solid var(--ffe-color-border-primary-default);
        background-color: var(--ffe-color-component-form-input-fill-default);

        @media (hover: hover) and (pointer: fine) {
            &:hover,
            &:has(+ .ffe-datepicker__button:hover) {
                border-color: var(--ffe-color-border-primary-hover);

                & + .ffe-datepicker__button {
                    border-color: var(--ffe-color-border-primary-hover);
                }
            }
        }

        &--invalid {
            border: 2px solid var(--ffe-color-border-feedback-critical);

            @media (hover: hover) and (pointer: fine) {
                &:hover {
                    border-color: var(--ffe-color-border-feedback-critical);
                }
                &:focus-within:hover {
                    border: 2px solid var(--ffe-color-border-feedback-critical);
                }
            }

            &:focus-within {
                border: 2px solid var(--ffe-color-border-feedback-critical);
                outline: none;
            }

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

                @media (hover: hover) and (pointer: fine) {
                    &:hover {
                        border: 2px solid
                            var(--ffe-color-border-feedback-critical);
                        outline: none;
                    }
                }
            }
        }
    }

    &__field {
        padding-block: var(--ffe-spacing-2xs);
        color: var(--ffe-color-foreground-default);
        background-color: transparent;

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

        &:focus {
            background-color: var(--ffe-color-surface-secondary-default);
            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: var(--ffe-color-background-default);
        border: 2px solid var(--ffe-color-border-primary-default);
        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: 2px solid var(--ffe-color-border-interactive-focus);
        }

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

                & ~ .ffe-input-field {
                    border-color: var(--ffe-color-border-primary-hover);
                }
            }
        }
    }

    &__icon.ffe-icons {
        vertical-align: middle;
        color: var(--ffe-color-foreground-interactive-link);
        transition: color var(--ffe-transition-duration) var(--ffe-ease);

        @media (hover: hover) and (pointer: fine) {
            &:hover {
                color: var(--ffe-color-foreground-interactive-link-hover);
            }
        }
    }
}