diff --git a/components/TempDesignSystem/Form/Country/country.module.css b/components/TempDesignSystem/Form/Country/country.module.css index 1d0fbacb5..ff8d4edf1 100644 --- a/components/TempDesignSystem/Form/Country/country.module.css +++ b/components/TempDesignSystem/Form/Country/country.module.css @@ -3,39 +3,31 @@ } .comboBoxContainer { + position: relative; + height: 60px; +} + +.label { + position: absolute; + left: var(--Spacing-x2); + top: var(--Spacing-x-one-and-half); + pointer-events: none; +} + +.input { background-color: var(--Main-Grey-White); border-color: var(--Scandic-Beige-40); border-radius: var(--Corner-radius-Medium); border-style: solid; border-width: 1px; - display: grid; - gap: var(--Spacing-x-half); - grid-template-areas: - "label chevron" - "input chevron"; - grid-template-columns: 1fr auto; - grid-template-rows: auto auto; - height: 60px; - padding: var(--Spacing-x1) var(--Spacing-x2); -} + padding: var(--Spacing-x4) var(--Spacing-x2) var(--Spacing-x1); + width: 100%; + height: 100%; -.comboBoxContainer:has( - .input[data-invalid="true"], - .input[aria-invalid="true"] - ) { - border-color: var(--Scandic-Red-60); -} - -.label { - grid-area: label; -} - -.input { - background-color: var(--Main-Grey-White); - border: none; - grid-area: input; - height: 18px; - padding: 0; + &[aria-invalid="true"], + &[data-invalid="true"] { + border-color: var(--Scandic-Red-60); + } } .input, @@ -50,8 +42,12 @@ grid-area: chevron; height: 100%; justify-self: flex-end; - padding-left: 0; + padding-left: var(--Spacing-x2); padding-right: var(--Spacing-x2); + position: absolute; + right: 0; + bottom: 0; + outline: none; } .popover {