@@ -183,27 +183,29 @@ inputContainer props = theCss <>? props.css
183183 , cursor: str "text"
184184 , boxSizing: borderBox
185185 , display: flex
186− , width: str "100%"
187186 , """&[data-invalid="false"]""":
188187 nest
189188 { borderColor: str colour.success
189+ , marginTop: str "-1px"
190190 , "--border-width": str "2px"
191191 }
192192 , """&[data-invalid="true"]""":
193193 nest
194194 { borderColor: str colour.invalid
195+ , marginTop: str "-1px"
195196 , "--border-width": str "2px"
196197 }
197198 , "&:focus-within":
198199 nest
199200 { "--border-width": str "2px"
200201 , borderColor: str colour.highlight
202+ , marginTop: str "-1px"
201203 , transition: str "border-color 0s linear 0.1s"
202− , boxShadow: str """
203− 0 1px 2px var(--highlight-col),
204− 0 2px 4px rgba(230,200,255,0.4),
205− 0 4px 12px rgba(230,200,255,0.3)"""
206− -- , animation: plopAnimation <> str " 260ms ease-in"
204+ -- , boxShadow: str $ """
205+ -- 0 1px 2px """ <> colour.highlightAlpha25 <> """,
206+ -- 0 2px 4px """ <> colour.highlightAlpha25 <> """,
207+ -- 0 4px 12px """ <> colour.highlightAlpha25
208+ , animation: plopAnimation <> str " 260ms ease-in"
207209 }
208210 , alignItems: center
209211 , justifyContent: center
@@ -212,23 +214,34 @@ inputContainer props = theCss <>? props.css
212214 , paddingRight: str "calc(var(--input-side-padding) - var(--border-width))"
213215 , paddingTop: str "calc(var(--input-top-padding) - var(--border-width))"
214216 , paddingBottom: str "calc(var(--input-bottom-padding) - var(--border-width))"
215− , height: str "calc(var(--s2))"
216217 , gap: str "calc(var(--input-side-padding) / 2)"
217218 , borderRadius: var "--input-border-radius"
218219 }
219220
220−containerContainer ∷ ∀ r. { | Props OptionalProp r } -> Style
221−containerContainer props = css { "--border-width": str "1px"
222− , "--input-border-radius": var "--s-1"
223− , width: str "calc(var(--s4) * 2)"
224− , background: str (props.background ?|| colour.inputBackground)
225− , boxSizing: contentBox
226− , borderRadius: var "--input-border-radius"
221+containerBackground ∷ ∀ r. { | Props OptionalProp r } -> Style
222+containerBackground props = css {
223+ background: str (props.background ?|| colour.inputBackground)
227224 , boxShadow: str """
228225 0 1px 1px rgba(200,200,255,0.2),
229226 0 2px 2px rgba(200,200,255,0.1),
230227 0 4px 8px rgba(200,200,255,0.03)"""
231228 , border: str $ "var(--border-width) solid " <> colour.inputBorder
229+ , borderRadius: var "--input-border-radius"
230+
231+}
232+
233+containerContainer ∷ ∀ r. { | Props OptionalProp r } -> Style
234+containerContainer props = css {
235+ "& > *": nested $ css {
236+ gridColumn: int 1,
237+ gridRow: int 1
238+ }, width: str "calc(var(--s4) * 2)"
239+ , height: str "calc(var(--s2) - var(--border-width) * 2)"
240+ , "--border-width": str "1px"
241+ , "--input-border-radius": var "--s-1"
242+ , borderRadius: var "--input-border-radius"
243+ , display: grid
244+ , overflow: visible
232245 }
233246
234247inputWrapper ∷ Style