@gov-design-system-ce/components 4.0.8-rc23 → 4.1.0-rc03

package/dist/collection/components/gov-form/multiselect/gov-form-multi-select.css

@@ -1,640 +0,0 @@
-.gov-form-multi-select__list {
-  margin: 0;
-  padding: 0;
-}
-
-.gov-form-multi-select__list > .gov-form-multi-select__item {
-  margin: 0;
-  padding: 0;
-  background: none;
-}
-.gov-form-multi-select__list > .gov-form-multi-select__item::before {
-  display: none;
-}
-
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* stylelint-disable */
-/* stylelint-enable */
-/* [Core] - Buttons
------------------------------------------------------------------- */
-/*
- * Gets color from theme-colors or from palette-colors
- */
-/*
- * Converts hex value to rgb colors value
- */
-/* stylelint-disable order/order */
-/* stylelint-enable order/order */
-/*
- * Generates list of utility classes for margin, padding
- *
- * Make sure $list of definitions is sorted so that last item is defined last
- * So largest views are mentioned last.
- */
-/*
- -  Variables - Sizes
- */
-/* "Constants" for general usage */
-/*
- -  Variables - Layout
- */
-/**
-* Utilities - Offset
-*/
-/* stylelint-disable order/order */
-/* stylelint-enable order/order */
-/* stylelint-disable order/order */
-/* stylelint-enable order/order */
-/* stylelint-disable order/order */
-/* stylelint-enable order/order */
-/**
-* Generates CSS3 var with button value
-*/
-/*
- -  Variables - General
- */
-/*
- -  Variables - Typography
- */
-/*
- -  Variables - Variants
- */
-/*
- -  Variables - Container
- */
-/*
- -  Variables - Sizes
- */
-/* "Constants" for general usage */
-/*
- -  Variables - Accordion
- */
-/*
- -  Variables - Attachments
- */
-/*
- -  Variables - Infobar
- */
-/*
- -  Variables - Backdrop
- */
-/*
- -  Variables - Buttons (&& Chips)
- */
-/*
- -  Variables - Breadcrumbs
- */
-/*
- -  Variables - Classes
- */
-/*
- -  Variables - Colors
- */
-/*
- -	Variables - Control Group
- */
-/*
- -  Variables - Cookiebar
- */
-/*
- -  Variables - Dropdown
- */
-/*
- -  Variables - Card
- */
-/*
- -  Variables - Message
- */
-/*
- -  Variables - Empty
- */
-/*
- -  Variables - Error code
- */
-/*
- -  Variables - Grid
- */
-/*
- -  Variables - Tiles
- */
-/*
- -  Variables - Modal & Prompt
- */
-/**
-* Utilities - Offset
-*/
-/*
- -  Variables - shadows
- */
-/* "Constants" for general usage */
-/*
- -  Variables - Statsbar
- */
-/*
- -  Variables - Tabs
- */
-/*
- -  Variables - Tooltip
- */
-/*
- -  Variables - Loading
- */
-/*
- -	Variables - Forms
- */
-/*
- -  Variables - Form Autocomplete
- */
-/*
- -  Variables - Form Message
- */
-/*
- -	Variables - Form label
- */
-/*
- -	Variables - Form switch
- */
-/*
- -	Variables - Form select
- */
-/*
- -	Variables - Form input
- */
-/*
- -	Variables - Form multiselect
- */
-/*
- -	Variables - Form password power
- */
-/*
- -	Variables - Form checkbox & radio
- */
-/*
- -  Variables - Form group
- */
-/*
- -	Variables - Form file
- */
-/*
- -  Variables - Toast Message
- */
-/*
- -  Variables - Wizard
- */
-/*
- -  Variables - Stepper
- */
-/*
- -  Variables - Side nav
- */
-/*
- -  Variables - Grid & Tile
- */
-/*
- -  Variables - Pagination
- */
-/*
- -  Variables - Nav
- */
-/*
- -  Variables - Layout
- */
-/*
- -  Variables - Tag
- */
-.gov-spin-animation,
-.gov-pseudo-spin-animation::before {
-  animation: spin 4s linear infinite;
-}
-
-@keyframes spin {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes countdown {
-  to {
-    transform: scaleX(0);
-  }
-}
-@keyframes progress {
-  0% {
-    background-position: -200px 0;
-  }
-  100% {
-    background-position: calc(200px + 100%) 0;
-  }
-}
-@keyframes pulse {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-/*
-*   Multiselect
-*/
-/*
- *   Select & Multiselect Shared Definitions
- */
-/*
- *   Input & Textarea & Select Shared Definitions
- */
-.gov-form-multi-select {
-  position: relative;
-  display: flex;
-  width: 100%;
-  align-items: center;
-}
-.gov-form-multi-select .element {
-  position: relative;
-  display: flex;
-  flex: 1 1 auto;
-}
-.gov-form-multi-select input,
-.gov-form-multi-select select,
-.gov-form-multi-select textarea {
-  width: 100%;
-  border-radius: var(--gov-border-radius, 0.1875rem);
-  background-color: var(--gov-form-bg-color, var(--gov-color-neutral-white));
-  font-family: var(--gov-font-family, "Roboto", sans-serif);
-}
-.gov-form-multi-select input:focus,
-.gov-form-multi-select select:focus,
-.gov-form-multi-select textarea:focus {
-  outline: none;
-}
-.gov-form-multi-select input:focus-visible,
-.gov-form-multi-select select:focus-visible,
-.gov-form-multi-select textarea:focus-visible {
-  border-radius: var(--gov-border-radius, 0.1875rem);
-  outline: var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);
-  outline-offset: 0;
-}
-.gov-form-multi-select input::-moz-placeholder, .gov-form-multi-select select::-moz-placeholder, .gov-form-multi-select textarea::-moz-placeholder {
-  color: var(--gov-form-placeholder-color, var(--gov-color-secondary-600));
-}
-.gov-form-multi-select input::placeholder,
-.gov-form-multi-select select::placeholder,
-.gov-form-multi-select textarea::placeholder {
-  color: var(--gov-form-placeholder-color, var(--gov-color-secondary-600));
-}
-.gov-form-multi-select textarea {
-  font-weight: var(--gov-text-m-font-weight);
-  font-size: var(--gov-text-m-font-size);
-  line-height: var(--gov-text-m-line-height);
-  letter-spacing: var(--gov-text-m-letter-spacing);
-  padding: 0.5rem 0.75rem;
-  resize: none;
-}
-.gov-form-multi-select *[slot=left-icon],
-.gov-form-multi-select *[slot=right-icon] {
-  position: absolute;
-  top: 50%;
-  display: flex;
-  justify-content: center;
-  transform: translateY(-50%);
-  pointer-events: none;
-}
-.gov-form-multi-select *[slot=left-icon] {
-  left: 0;
-}
-.gov-form-multi-select *[slot=right-icon] {
-  right: 0;
-}
-.gov-form-multi-select *[slot=prefix],
-.gov-form-multi-select *[slot=sufix] {
-  margin: 0;
-}
-[size=s].gov-form-multi-select {
-  font-weight: var(--gov-text-s-font-weight);
-  font-size: var(--gov-text-s-font-size);
-  line-height: var(--gov-text-s-line-height);
-  letter-spacing: var(--gov-text-s-letter-spacing);
-  gap: 0.5rem var(--gov-form-input-core-s-icon-size, 1rem);
-}
-[size=s].gov-form-multi-select input,
-[size=s].gov-form-multi-select select {
-  font-weight: var(--gov-text-s-font-weight);
-  font-size: var(--gov-text-s-font-size);
-  line-height: var(--gov-text-s-line-height);
-  letter-spacing: var(--gov-text-s-letter-spacing);
-  height: var(--gov-form-input-core-s-height, 2rem);
-  padding: var(--gov-form-input-core-s-padding, 0.25rem 0.75rem);
-}
-[size=s].gov-form-multi-select *[slot=left-icon],
-[size=s].gov-form-multi-select *[slot=right-icon] {
-  width: var(--gov-form-input-core-s-icon-size, 1rem);
-  height: var(--gov-form-input-core-s-icon-size, 1rem);
-}
-[size=s].gov-form-multi-select *[slot=left-icon] {
-  left: calc((var(--gov-form-input-core-s-icon-padding, 2rem) - var(--gov-form-input-core-s-icon-size, 1rem)) / 2);
-}
-[size=s].gov-form-multi-select *[slot=left-icon] ~ input {
-  padding-left: var(--gov-form-input-core-s-icon-padding, 2rem);
-}
-[size=s].gov-form-multi-select *[slot=right-icon] {
-  right: calc((var(--gov-form-input-core-s-icon-padding, 2rem) - var(--gov-form-input-core-s-icon-size, 1rem)) / 2);
-}
-[size=s].gov-form-multi-select *[slot=right-icon] ~ input, [size=s].gov-form-multi-select *[slot=right-icon] ~ select {
-  padding-right: var(--gov-form-input-core-s-icon-padding, 2rem);
-}
-[size=m].gov-form-multi-select {
-  font-weight: var(--gov-text-m-font-weight);
-  font-size: var(--gov-text-m-font-size);
-  line-height: var(--gov-text-m-line-height);
-  letter-spacing: var(--gov-text-m-letter-spacing);
-  gap: 0.5rem var(--gov-form-input-core-m-icon-size, 1rem);
-}
-[size=m].gov-form-multi-select input,
-[size=m].gov-form-multi-select select {
-  font-weight: var(--gov-text-m-font-weight);
-  font-size: var(--gov-text-m-font-size);
-  line-height: var(--gov-text-m-line-height);
-  letter-spacing: var(--gov-text-m-letter-spacing);
-  height: var(--gov-form-input-core-m-height, 2.5rem);
-  padding: var(--gov-form-input-core-m-padding, 0.4375rem 0.75rem);
-}
-[size=m].gov-form-multi-select *[slot=left-icon],
-[size=m].gov-form-multi-select *[slot=right-icon] {
-  width: var(--gov-form-input-core-m-icon-size, 1rem);
-  height: var(--gov-form-input-core-m-icon-size, 1rem);
-}
-[size=m].gov-form-multi-select *[slot=left-icon] {
-  left: calc((var(--gov-form-input-core-m-icon-padding, 2.5rem) - var(--gov-form-input-core-m-icon-size, 1rem)) / 2);
-}
-[size=m].gov-form-multi-select *[slot=left-icon] ~ input {
-  padding-left: var(--gov-form-input-core-m-icon-padding, 2.5rem);
-}
-[size=m].gov-form-multi-select *[slot=right-icon] {
-  right: calc((var(--gov-form-input-core-m-icon-padding, 2.5rem) - var(--gov-form-input-core-m-icon-size, 1rem)) / 2);
-}
-[size=m].gov-form-multi-select *[slot=right-icon] ~ input, [size=m].gov-form-multi-select *[slot=right-icon] ~ select {
-  padding-right: var(--gov-form-input-core-m-icon-padding, 2.5rem);
-}
-[size=l].gov-form-multi-select {
-  font-weight: var(--gov-text-m-font-weight);
-  font-size: var(--gov-text-m-font-size);
-  line-height: var(--gov-text-m-line-height);
-  letter-spacing: var(--gov-text-m-letter-spacing);
-  gap: 0.5rem var(--gov-form-input-core-l-icon-size, 1rem);
-}
-[size=l].gov-form-multi-select input,
-[size=l].gov-form-multi-select select {
-  font-weight: var(--gov-text-m-font-weight);
-  font-size: var(--gov-text-m-font-size);
-  line-height: var(--gov-text-m-line-height);
-  letter-spacing: var(--gov-text-m-letter-spacing);
-  height: var(--gov-form-input-core-l-height, 3rem);
-  padding: var(--gov-form-input-core-l-padding, 0.6875rem 0.75rem);
-}
-[size=l].gov-form-multi-select *[slot=left-icon],
-[size=l].gov-form-multi-select *[slot=right-icon] {
-  width: var(--gov-form-input-core-l-icon-size, 1rem);
-  height: var(--gov-form-input-core-l-icon-size, 1rem);
-}
-[size=l].gov-form-multi-select *[slot=left-icon] {
-  left: calc((var(--gov-form-input-core-l-icon-padding, 2.5rem) - var(--gov-form-input-core-l-icon-size, 1rem)) / 2);
-}
-[size=l].gov-form-multi-select *[slot=left-icon] ~ input {
-  padding-left: var(--gov-form-input-core-l-icon-padding, 2.5rem);
-}
-[size=l].gov-form-multi-select *[slot=right-icon] {
-  right: calc((var(--gov-form-input-core-l-icon-padding, 2.5rem) - var(--gov-form-input-core-l-icon-size, 1rem)) / 2);
-}
-[size=l].gov-form-multi-select *[slot=right-icon] ~ input, [size=l].gov-form-multi-select *[slot=right-icon] ~ select {
-  padding-right: var(--gov-form-input-core-l-icon-padding, 2.5rem);
-}
-[size=xl].gov-form-multi-select {
-  font-weight: var(--gov-text-l-font-weight);
-  font-size: var(--gov-text-l-font-size);
-  line-height: var(--gov-text-l-line-height);
-  letter-spacing: var(--gov-text-l-letter-spacing);
-  gap: 0.5rem var(--gov-form-input-core-xl-icon-size, 1.25rem);
-}
-[size=xl].gov-form-multi-select input,
-[size=xl].gov-form-multi-select select {
-  font-weight: var(--gov-text-l-font-weight);
-  font-size: var(--gov-text-l-font-size);
-  line-height: var(--gov-text-l-line-height);
-  letter-spacing: var(--gov-text-l-letter-spacing);
-  height: var(--gov-form-input-core-xl-height, 3.5rem);
-  padding: var(--gov-form-input-core-xl-padding, 0.9375rem 1rem 0.875rem);
-}
-[size=xl].gov-form-multi-select *[slot=left-icon],
-[size=xl].gov-form-multi-select *[slot=right-icon] {
-  width: var(--gov-form-input-core-xl-icon-size, 1.25rem);
-  height: var(--gov-form-input-core-xl-icon-size, 1.25rem);
-}
-[size=xl].gov-form-multi-select *[slot=left-icon] {
-  left: calc((var(--gov-form-input-core-xl-icon-padding, 3rem) - var(--gov-form-input-core-xl-icon-size, 1.25rem)) / 2);
-}
-[size=xl].gov-form-multi-select *[slot=left-icon] ~ input {
-  padding-left: var(--gov-form-input-core-xl-icon-padding, 3rem);
-}
-[size=xl].gov-form-multi-select *[slot=right-icon] {
-  right: calc((var(--gov-form-input-core-xl-icon-padding, 3rem) - var(--gov-form-input-core-xl-icon-size, 1.25rem)) / 2);
-}
-[size=xl].gov-form-multi-select *[slot=right-icon] ~ input, [size=xl].gov-form-multi-select *[slot=right-icon] ~ select {
-  padding-right: var(--gov-form-input-core-xl-icon-padding, 3rem);
-}
-[variant=primary].gov-form-multi-select input,
-[variant=primary].gov-form-multi-select select,
-[variant=primary].gov-form-multi-select textarea {
-  color: var(--gov-form-input-color-primary, var(--gov-color-secondary-700));
-  border: var(--gov-form-input-border-primary, 0.0625rem solid var(--gov-color-primary-600));
-}
-[variant=primary].gov-form-multi-select *[slot=left-icon],
-[variant=primary].gov-form-multi-select *[slot=right-icon]:not(.icon-arrow) {
-  color: var(--gov-form-input-icon-color-primary, var(--gov-color-primary));
-}
-[variant=secondary].gov-form-multi-select input,
-[variant=secondary].gov-form-multi-select select,
-[variant=secondary].gov-form-multi-select textarea {
-  color: var(--gov-form-input-color-secondary, var(--gov-color-secondary-700));
-  border: var(--gov-form-input-border-secondary, 0.0625rem solid var(--gov-color-secondary-700));
-}
-[variant=secondary].gov-form-multi-select *[slot=left-icon],
-[variant=secondary].gov-form-multi-select *[slot=right-icon]:not(.icon-arrow) {
-  color: var(--gov-form-input-icon-color-secondary, var(--gov-color-primary));
-}
-[disabled=""].gov-form-multi-select, [disabled=true i].gov-form-multi-select, [disabled="1"].gov-form-multi-select {
-  pointer-events: none;
-}
-[disabled=""].gov-form-multi-select input,
-[disabled=""].gov-form-multi-select select,
-[disabled=""].gov-form-multi-select textarea, [disabled=true i].gov-form-multi-select input,
-[disabled=true i].gov-form-multi-select select,
-[disabled=true i].gov-form-multi-select textarea, [disabled="1"].gov-form-multi-select input,
-[disabled="1"].gov-form-multi-select select,
-[disabled="1"].gov-form-multi-select textarea {
-  border-color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
-  background: var(--gov-form-input-disabled-bg, var(--gov-color-secondary-300));
-  color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
-}
-[disabled=""].gov-form-multi-select *[slot=left-icon],
-[disabled=""].gov-form-multi-select *[slot=right-icon], [disabled=true i].gov-form-multi-select *[slot=left-icon],
-[disabled=true i].gov-form-multi-select *[slot=right-icon], [disabled="1"].gov-form-multi-select *[slot=left-icon],
-[disabled="1"].gov-form-multi-select *[slot=right-icon] {
-  color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600)) !important;
-}
-[invalid=""].gov-form-multi-select input,
-[invalid=""].gov-form-multi-select select,
-[invalid=""].gov-form-multi-select textarea, [invalid=true i].gov-form-multi-select input,
-[invalid=true i].gov-form-multi-select select,
-[invalid=true i].gov-form-multi-select textarea, [invalid="1"].gov-form-multi-select input,
-[invalid="1"].gov-form-multi-select select,
-[invalid="1"].gov-form-multi-select textarea {
-  border-color: var(--gov-form-state-color-error, var(--gov-color-error));
-  color: var(--gov-form-state-color-error, var(--gov-color-error));
-}
-[invalid=""].gov-form-multi-select input::-moz-placeholder, [invalid=""].gov-form-multi-select select::-moz-placeholder, [invalid=""].gov-form-multi-select textarea::-moz-placeholder, [invalid=true i].gov-form-multi-select input::-moz-placeholder, [invalid=true i].gov-form-multi-select select::-moz-placeholder, [invalid=true i].gov-form-multi-select textarea::-moz-placeholder, [invalid="1"].gov-form-multi-select input::-moz-placeholder, [invalid="1"].gov-form-multi-select select::-moz-placeholder, [invalid="1"].gov-form-multi-select textarea::-moz-placeholder {
-  color: var(--gov-form-state-color-error, var(--gov-color-error-300));
-}
-[invalid=""].gov-form-multi-select input::placeholder,
-[invalid=""].gov-form-multi-select select::placeholder,
-[invalid=""].gov-form-multi-select textarea::placeholder, [invalid=true i].gov-form-multi-select input::placeholder,
-[invalid=true i].gov-form-multi-select select::placeholder,
-[invalid=true i].gov-form-multi-select textarea::placeholder, [invalid="1"].gov-form-multi-select input::placeholder,
-[invalid="1"].gov-form-multi-select select::placeholder,
-[invalid="1"].gov-form-multi-select textarea::placeholder {
-  color: var(--gov-form-state-color-error, var(--gov-color-error-300));
-}
-[invalid=""].gov-form-multi-select *[slot=left-icon],
-[invalid=""].gov-form-multi-select *[slot=right-icon], [invalid=true i].gov-form-multi-select *[slot=left-icon],
-[invalid=true i].gov-form-multi-select *[slot=right-icon], [invalid="1"].gov-form-multi-select *[slot=left-icon],
-[invalid="1"].gov-form-multi-select *[slot=right-icon] {
-  color: var(--gov-form-state-color-error, var(--gov-color-error)) !important;
-}
-[invalid=""].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), [invalid=true i].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), [invalid="1"].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow) {
-  display: none;
-}
-[success=""].gov-form-multi-select *[slot=right-icon]:not(.icon-arrow), [success=true i].gov-form-multi-select *[slot=right-icon]:not(.icon-arrow), [success="1"].gov-form-multi-select *[slot=right-icon]:not(.icon-arrow) {
-  color: var(--gov-form-state-color-success, var(--gov-color-success));
-}
-[success=""].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), [success=true i].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), [success="1"].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow) {
-  display: none;
-}
-[multiline=""].gov-form-multi-select *[slot=left-icon],
-[multiline=""].gov-form-multi-select *[slot=right-icon], [multiline=true i].gov-form-multi-select *[slot=left-icon],
-[multiline=true i].gov-form-multi-select *[slot=right-icon], [multiline="1"].gov-form-multi-select *[slot=left-icon],
-[multiline="1"].gov-form-multi-select *[slot=right-icon] {
-  display: none;
-}
-
-.gov-form-multi-select {
-  background: none;
-}
-.gov-form-multi-select select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-.gov-form-multi-select select::-ms-expand {
-  display: none;
-}
-[size=s].gov-form-multi-select *[slot=right-icon] {
-  right: var(--gov-form-select-s-arrow-right-position, 0.75rem);
-  width: var(--gov-form-select-s-arrow-size, 0.75rem);
-  height: var(--gov-form-select-s-arrow-size, 0.75rem);
-}
-[size=s][invalid=""].gov-form-multi-select .icon-arrow, [size=s][invalid=true i].gov-form-multi-select .icon-arrow, [size=s][invalid="1"].gov-form-multi-select .icon-arrow {
-  right: calc(3 * var(--gov-form-select-s-arrow-right-position, 0.75rem));
-}
-[size=s][success=""].gov-form-multi-select .icon-arrow, [size=s][success=true i].gov-form-multi-select .icon-arrow, [size=s][success="1"].gov-form-multi-select .icon-arrow {
-  right: calc(3 * var(--gov-form-select-s-arrow-right-position, 0.75rem));
-}
-[size=m].gov-form-multi-select *[slot=right-icon] {
-  right: var(--gov-form-select-m-arrow-right-position, 1rem);
-  width: var(--gov-form-select-m-arrow-size, 0.75rem);
-  height: var(--gov-form-select-m-arrow-size, 0.75rem);
-}
-[size=m][invalid=""].gov-form-multi-select .icon-arrow, [size=m][invalid=true i].gov-form-multi-select .icon-arrow, [size=m][invalid="1"].gov-form-multi-select .icon-arrow {
-  right: calc(3 * var(--gov-form-select-m-arrow-right-position, 1rem));
-}
-[size=m][success=""].gov-form-multi-select .icon-arrow, [size=m][success=true i].gov-form-multi-select .icon-arrow, [size=m][success="1"].gov-form-multi-select .icon-arrow {
-  right: calc(3 * var(--gov-form-select-m-arrow-right-position, 1rem));
-}
-[size=l].gov-form-multi-select *[slot=right-icon] {
-  right: var(--gov-form-select-l-arrow-right-position, 1rem);
-  width: var(--gov-form-select-l-arrow-size, 1rem);
-  height: var(--gov-form-select-l-arrow-size, 1rem);
-}
-[size=l][invalid=""].gov-form-multi-select .icon-arrow, [size=l][invalid=true i].gov-form-multi-select .icon-arrow, [size=l][invalid="1"].gov-form-multi-select .icon-arrow {
-  right: calc(3 * var(--gov-form-select-l-arrow-right-position, 1rem));
-}
-[size=l][success=""].gov-form-multi-select .icon-arrow, [size=l][success=true i].gov-form-multi-select .icon-arrow, [size=l][success="1"].gov-form-multi-select .icon-arrow {
-  right: calc(3 * var(--gov-form-select-l-arrow-right-position, 1rem));
-}
-[size=xl].gov-form-multi-select *[slot=right-icon] {
-  right: var(--gov-form-select-xl-arrow-right-position, 1.3125rem);
-  width: var(--gov-form-select-xl-arrow-size, 1rem);
-  height: var(--gov-form-select-xl-arrow-size, 1rem);
-}
-[size=xl][invalid=""].gov-form-multi-select .icon-arrow, [size=xl][invalid=true i].gov-form-multi-select .icon-arrow, [size=xl][invalid="1"].gov-form-multi-select .icon-arrow {
-  right: calc(3 * var(--gov-form-select-xl-arrow-right-position, 1.3125rem));
-}
-[size=xl][success=""].gov-form-multi-select .icon-arrow, [size=xl][success=true i].gov-form-multi-select .icon-arrow, [size=xl][success="1"].gov-form-multi-select .icon-arrow {
-  right: calc(3 * var(--gov-form-select-xl-arrow-right-position, 1.3125rem));
-}
-[size=s][invalid=""].gov-form-multi-select *[slot=right-icon] ~ select, [size=s][invalid=""].gov-form-multi-select *[slot=right-icon] ~ input, [size=s][invalid=true i].gov-form-multi-select *[slot=right-icon] ~ select, [size=s][invalid=true i].gov-form-multi-select *[slot=right-icon] ~ input, [size=s][invalid="1"].gov-form-multi-select *[slot=right-icon] ~ select, [size=s][invalid="1"].gov-form-multi-select *[slot=right-icon] ~ input {
-  padding-right: calc(2 * var(--gov-form-input-core-s-icon-padding, 2rem));
-}
-[size=s][success=""].gov-form-multi-select *[slot=right-icon] ~ select, [size=s][success=""].gov-form-multi-select *[slot=right-icon] ~ input, [size=s][success=true i].gov-form-multi-select *[slot=right-icon] ~ select, [size=s][success=true i].gov-form-multi-select *[slot=right-icon] ~ input, [size=s][success="1"].gov-form-multi-select *[slot=right-icon] ~ select, [size=s][success="1"].gov-form-multi-select *[slot=right-icon] ~ input {
-  padding-right: calc(2 * var(--gov-form-input-core-s-icon-padding, 2rem));
-}
-[size=m][invalid=""].gov-form-multi-select *[slot=right-icon] ~ select, [size=m][invalid=""].gov-form-multi-select *[slot=right-icon] ~ input, [size=m][invalid=true i].gov-form-multi-select *[slot=right-icon] ~ select, [size=m][invalid=true i].gov-form-multi-select *[slot=right-icon] ~ input, [size=m][invalid="1"].gov-form-multi-select *[slot=right-icon] ~ select, [size=m][invalid="1"].gov-form-multi-select *[slot=right-icon] ~ input {
-  padding-right: calc(2 * var(--gov-form-input-core-m-icon-padding, 2.5rem));
-}
-[size=m][success=""].gov-form-multi-select *[slot=right-icon] ~ select, [size=m][success=""].gov-form-multi-select *[slot=right-icon] ~ input, [size=m][success=true i].gov-form-multi-select *[slot=right-icon] ~ select, [size=m][success=true i].gov-form-multi-select *[slot=right-icon] ~ input, [size=m][success="1"].gov-form-multi-select *[slot=right-icon] ~ select, [size=m][success="1"].gov-form-multi-select *[slot=right-icon] ~ input {
-  padding-right: calc(2 * var(--gov-form-input-core-m-icon-padding, 2.5rem));
-}
-[size=l][invalid=""].gov-form-multi-select *[slot=right-icon] ~ select, [size=l][invalid=""].gov-form-multi-select *[slot=right-icon] ~ input, [size=l][invalid=true i].gov-form-multi-select *[slot=right-icon] ~ select, [size=l][invalid=true i].gov-form-multi-select *[slot=right-icon] ~ input, [size=l][invalid="1"].gov-form-multi-select *[slot=right-icon] ~ select, [size=l][invalid="1"].gov-form-multi-select *[slot=right-icon] ~ input {
-  padding-right: calc(2 * var(--gov-form-input-core-l-icon-padding, 2.5rem));
-}
-[size=l][success=""].gov-form-multi-select *[slot=right-icon] ~ select, [size=l][success=""].gov-form-multi-select *[slot=right-icon] ~ input, [size=l][success=true i].gov-form-multi-select *[slot=right-icon] ~ select, [size=l][success=true i].gov-form-multi-select *[slot=right-icon] ~ input, [size=l][success="1"].gov-form-multi-select *[slot=right-icon] ~ select, [size=l][success="1"].gov-form-multi-select *[slot=right-icon] ~ input {
-  padding-right: calc(2 * var(--gov-form-input-core-l-icon-padding, 2.5rem));
-}
-[size=xl][invalid=""].gov-form-multi-select *[slot=right-icon] ~ select, [size=xl][invalid=""].gov-form-multi-select *[slot=right-icon] ~ input, [size=xl][invalid=true i].gov-form-multi-select *[slot=right-icon] ~ select, [size=xl][invalid=true i].gov-form-multi-select *[slot=right-icon] ~ input, [size=xl][invalid="1"].gov-form-multi-select *[slot=right-icon] ~ select, [size=xl][invalid="1"].gov-form-multi-select *[slot=right-icon] ~ input {
-  padding-right: calc(2 * var(--gov-form-input-core-xl-icon-padding, 3rem));
-}
-[size=xl][success=""].gov-form-multi-select *[slot=right-icon] ~ select, [size=xl][success=""].gov-form-multi-select *[slot=right-icon] ~ input, [size=xl][success=true i].gov-form-multi-select *[slot=right-icon] ~ select, [size=xl][success=true i].gov-form-multi-select *[slot=right-icon] ~ input, [size=xl][success="1"].gov-form-multi-select *[slot=right-icon] ~ select, [size=xl][success="1"].gov-form-multi-select *[slot=right-icon] ~ input {
-  padding-right: calc(2 * var(--gov-form-input-core-xl-icon-padding, 3rem));
-}
-
-.gov-form-multi-select {
-  flex-wrap: wrap;
-}
-.gov-form-multi-select__wrap {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-}
-.gov-form-multi-select__list {
-  font-weight: var(--gov-text-xs-font-weight);
-  font-size: var(--gov-text-xs-font-size);
-  line-height: var(--gov-text-xs-line-height);
-  letter-spacing: var(--gov-text-xs-letter-spacing);
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-.gov-form-multi-select__list > .gov-form-multi-select__item {
-  position: relative;
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  padding: 0rem 0rem 0rem 0.5rem;
-  background: var(--gov-form-multiselect-bg, var(--gov-color-primary-200));
-  transition: 150ms linear background-color;
-}