<div class="demo">
<input type="text" class="input" placeholder="First name" />
</div>
@import url("/support.css") layer(support);
@layer support, recipes;
@layer recipe {
.input {
--_padding-inline: 0.75rem;
--_padding-block: 0.375rem;
--_font-size: 0.875rem;
--_height: 2.25rem;
--_focus-outline-offset: -1px;
--_text: var(--text);
--_bg: var(--document);
--_border-color: oklch(from var(--border) calc(l - 0.025) c h);
--_hover-border-color: oklch(from var(--border) calc(l - 0.1) c h);
@container style(--theme: dark) {
--_bg: oklch(from var(--document) calc(l + 0.0375) c h);
--_border-color: oklch(from var(--border) calc(l + 0.0125) c h);
--_hover-border-color: oklch(from var(--border) calc(l + 0.075) c h);
}
appearance: none;
font: inherit;
display: block;
inline-size: 100%;
min-height: var(--_height);
padding-inline: var(--_padding-inline);
padding-block: var(--_padding-block);
font-size: var(--_font-size);
line-height: 1.5;
border-radius: var(--radius);
border: 1px solid var(--_border-color);
color: var(--_text);
background-color: var(--_bg);
box-shadow:
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
&[readonly],
&:disabled {
opacity: 0.65;
}
&:hover {
border-color: var(--_hover-border-color);
}
}
}
@layer support {
.demo {
height: 100%;
display: flex;
align-content: center;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
margin-inline: auto;
width: min(100% - 2rem, 50ch);
}
}