.root {
    composes: grid-flow-col from global;
    composes: h-[2.5rem] from global;
    composes: inline-grid from global;
    composes: w-full from global;
    grid-template-areas: 'before input after';
    grid-template-columns: auto 1fr auto;
}

.input {
    composes: items-center from global;
    composes: flex from global;
    grid-column: before-start / after-end;
    grid-row: input-start / input-end;
}

.input > input {
    padding-left: calc(
        theme(spacing[7.5]) * var(--iconsBefore) + theme(spacing[2.5])
    );
    padding-right: calc(
        theme(spacing[7.5]) * var(--iconsAfter) + theme(spacing[2.5])
    );
}

.before,
.after {
    composes: flex from global;
    composes: items-center from global;
    composes: justify-center from global;
    composes: mx-0.5 from global;
    composes: my-0 from global;
    composes: pointer-events-none from global;
    composes: w-[2.5rem] from global;
    composes: z-foreground from global;
    composes: empty_hidden from global;
}

.before {
    grid-area: before;
}

.after {
    grid-area: after;
}

.before svg {
    @apply stroke-gray-600;
}