.ffe-datepicker {
    font-family: var(--ffe-g-font);
    position: relative;
    height: 2.8125rem; //Etterlikner ffe-input-field
    display: grid;
    grid-template-columns: 1fr auto;
    background-color: var(--ffe-color-surface-primary-default);
    width: fit-content;
    border: var(--ffe-g-border-width) solid
        var(--ffe-color-border-primary-default);
    border-radius: var(--ffe-g-border-radius);
    outline-offset: var(--ffe-g-outline-offset);
    outline: var(--ffe-g-outline-width) solid transparent;
    transition:
        color var(--ffe-transition-duration) var(--ffe-ease),
        border var(--ffe-transition-duration) var(--ffe-ease),
        box-shadow var(--ffe-transition-duration) var(--ffe-ease),
        background-color var(--ffe-transition-duration) var(--ffe-ease),
        outline var(--ffe-transition-duration) var(--ffe-ease);
    &--full-width {
        width: 100%;
    }

    @media (hover: hover) and (pointer: fine) {
        &:hover {
            border-color: var(--ffe-color-border-primary-default-hover);
            box-shadow: var(--ffe-g-border-focus-box-shadow)
                var(--ffe-color-border-primary-default-hover);
        }
    }

    &__button {
        height: calc(2.8125rem - var(--ffe-g-border-width) * 2);
        background: transparent;
        border: none;
        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: all var(--ffe-transition-duration) var(--ffe-ease);
        width: 56px;
        cursor: pointer;
        isolation: isolate;

        &:focus-visible {
            background-color: var(--ffe-color-fill-primary-subtle);
        }
    }

    .ffe-input-field:focus {
        border: none;
    }

    &:focus-within,
    &:has(&__button:focus) .ffe-input-field:hover {
        box-shadow: var(--ffe-g-border-focus-box-shadow)
            var(--ffe-color-component-form-input-border-active);
        border-color: var(--ffe-color-component-form-input-border-active);
    }

    @media (pointer: fine) {
        &:focus-within {
            outline-color: var(--ffe-color-border-interactive-focus);
        }
    }

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

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

    .ffe-dateinput {
        display: flex;
        align-items: center;
        height: 2.7495rem; //Litt mindre enn parent for å unngå hopping ved åpning av kalenderen
        border: none;
        padding: var(--ffe-spacing-2xs) var(--ffe-spacing-sm);
        position: relative;
        grid-column: 1 e('/') 3;
        grid-row: 1 e('/') -1;
        min-width: 210px;
        color: var(--ffe-color-foreground-default);

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

        &__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-fill-primary-subtle);
                outline: none;
            }

            &::-ms-clear {
                display: none;
            }
        }

        &--message {
            padding-bottom: 0;
        }
    }

    &--invalid {
        border: var(--ffe-g-border-width) solid
            var(--ffe-color-border-feedback-critical);
        box-shadow: var(--ffe-g-border-focus-box-shadow)
            var(--ffe-color-border-feedback-critical);
        background-color: var(--ffe-color-surface-feedback-critical);

        @media (hover: hover) and (pointer: fine) {
            &:hover {
                border: var(--ffe-g-border-width) solid
                    var(--ffe-color-border-feedback-critical);
                box-shadow: var(--ffe-g-border-focus-box-shadow)
                    var(--ffe-color-border-feedback-critical);
                background-color: var(--ffe-color-surface-primary-default);
            }
            &:focus-within:hover {
                border-color: var(--ffe-color-border-feedback-critical);
            }
        }

        &:focus-within {
            box-shadow: var(--ffe-g-border-focus-box-shadow)
                var(--ffe-color-border-feedback-critical);
            border: var(--ffe-g-border-width) solid
                var(--ffe-color-border-feedback-critical);
        }

        .ffe-dateinput,
        .ffe-dateinput__field {
            color: var(--ffe-color-foreground-feedback-critical);
        }
    }
}