diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss index 6d3bfbb7736..388bbd217b1 100644 --- a/packages/calcite-components/src/components/combobox/combobox.scss +++ b/packages/calcite-components/src/components/combobox/combobox.scss @@ -17,7 +17,8 @@ @apply text-n2; --calcite-combobox-item-spacing-unit-l: theme("spacing.2"); --calcite-combobox-item-spacing-unit-s: theme("spacing.1"); - --calcite-combobox-input-height: theme("spacing.6"); + --calcite-combobox-input-height: theme("spacing.4"); + --calcite-internal-combobox-input-margin-block: calc(theme("spacing.1") - theme("borderWidth.DEFAULT")); .x-button { margin-inline-end: theme("spacing.2"); @@ -28,7 +29,8 @@ @apply text-n1; --calcite-combobox-item-spacing-unit-l: theme("spacing.3"); --calcite-combobox-item-spacing-unit-s: theme("spacing.2"); - --calcite-combobox-input-height: theme("spacing.8"); + --calcite-combobox-input-height: theme("spacing.4"); + --calcite-internal-combobox-input-margin-block: calc(theme("spacing.2") - theme("borderWidth.DEFAULT")); .x-button { margin-inline-end: theme("spacing.3"); @@ -39,7 +41,8 @@ @apply text-0; --calcite-combobox-item-spacing-unit-l: theme("spacing.4"); --calcite-combobox-item-spacing-unit-s: theme("spacing.3"); - --calcite-combobox-input-height: theme("spacing.11"); + --calcite-combobox-input-height: theme("spacing.6"); + --calcite-internal-combobox-input-margin-block: calc(theme("spacing[2.5]") - theme("borderWidth.DEFAULT")); .x-button { margin-inline-end: theme("spacing.4"); @@ -101,7 +104,8 @@ } .input--single { - @apply mb-0 mt-0 p-0; + @apply p-0; + margin-block: var(--calcite-internal-combobox-input-margin-block); } .wrapper--active .input-single { @@ -121,7 +125,7 @@ } .input-wrap { - @apply flex flex-grow; + @apply flex flex-grow items-center; } .input-wrap--single {