.uikit-text-field {
    display: inline-flex;
    width: 16em;
    max-width: 100%;
    background: rgb(var(--P-color-shade) / var(--P-color-shade-opacity));
    border: 1px solid rgb(var(--P-color-soft-outline) / var(--P-color-soft-outline-opacity));
    border-radius: 0.5em;
    box-sizing: border-box;

    .i-inner-field {
        margin: 0;
        background: none;
        font: inherit;
        color: inherit;
        padding: 0.5em 1em;
        border: none;
        width: 0;
        flex: 1;

        &::placeholder {
            color: rgb(var(--P-color-fg) / 0.5);
        }

        &:focus {
            outline: none;
        }
    }

    &.is-focused {
        box-shadow: 0 0 0 0.2em rgb(var(--P-color-accent) / 0.5);
        animation: uikit-text-field-focus-in 0.3s var(--P-ease-default);
    }

    &.is-narrow .i-inner-field {
        padding: 0.1em 0.5em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .uikit-text-field.is-focused {
        animation: none;
    }
}

@keyframes uikit-text-field-focus-in {
    0% {
        box-shadow: 0 0 0 1em rgb(var(--P-color-accent) / 0);
    }
}
