@digdir/designsystemet-css/dist/src/suggestion.css

CSS for Designsystemet

.ds-suggestion{--dsc-suggestion-option-background--selected:var(--ds-color-surface-tinted);--dsc-suggestion-option-border-color:var(--ds-color-base-default);--dsc-suggestion-clear-gap:var(--ds-size-2);--dsc-suggestion-clear-padding:var(--ds-size-1);--dsc-suggestion-clear-size:var(--ds-size-9);--dsc-suggestion-clear-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");--dsc-suggestion-option-checkmark-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M18.998 6.94a.75.75 0 0 1 .063 1.058l-8 9a.75.75 0 0 1-1.091.032l-5-5a.75.75 0 1 1 1.06-1.06l4.438 4.437 7.471-8.405A.75.75 0 0 1 19 6.939' clip-rule='evenodd'/%3E%3C/svg%3E");--dsc-suggestion-option-checkmark-size:var(--ds-size-7);--dsc-suggestion-list-gap:var(--ds-size-2);--dsc-suggestion-border-width:var(--ds-border-width-default);--dsc-suggestion-border-style:solid;--dsc-suggestion-border-color:var(--ds-color-neutral-border-default);box-sizing:border-box;flex-wrap:wrap;gap:var(--ds-size-1);position:relative}.ds-suggestion:not([hidden]){display:flex}.ds-suggestion:not([data-multiple]) data,.ds-suggestion[data-multiple=false] data{display:none}.ds-suggestion>data{margin-bottom:var(--ds-size-1)}:is(.ds-suggestion>data):has(+data){-webkit-margin-end:var(--ds-size-1);margin-inline-end:var(--ds-size-1)}.ds-suggestion u-datalist{background:var(--ds-color-neutral-surface-default);border-color:var(--dsc-suggestion-border-color);border-radius:var(--ds-border-radius-md);border-style:var(--dsc-suggestion-border-style);border-width:var(--dsc-suggestion-border-width);box-shadow:var(--ds-shadow-md);box-sizing:border-box;color:var(--ds-color-neutral-text-default);inset:0 auto auto 0;max-height:200px;overflow-y:auto;padding:0;position:fixed}:is(.ds-suggestion u-datalist):not([popover]){inset:100% 0 auto 0;margin-top:var(--dsc-suggestion-list-gap);position:absolute;z-index:1600}:is(.ds-suggestion u-datalist):empty{display:none}:is(.ds-suggestion u-datalist)>*{font-family:inherit;padding:var(--ds-size-2) var(--ds-size-3)}:is(.ds-suggestion u-datalist)>:is(u-option){border:none;-webkit-border-start:5px solid transparent;border-inline-start:5px solid transparent;border-radius:var(--ds-border-radius-sm);cursor:pointer;outline:none;-webkit-padding-start:var(--dsc-suggestion-option-checkmark-size);padding-inline-start:var(--dsc-suggestion-option-checkmark-size);position:relative}[selected]:is(:is(.ds-suggestion u-datalist)>:is(u-option)):before{background:currentcolor;content:"";height:var(--dsc-suggestion-option-checkmark-size);inset-inline-start:0;-webkit-mask:var(--dsc-suggestion-option-checkmark-url) center /contain no-repeat;mask:var(--dsc-suggestion-option-checkmark-url) center /contain no-repeat;position:absolute;width:var(--dsc-suggestion-option-checkmark-size)}:is(:is(.ds-suggestion u-datalist)>:is(u-option)):focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow-inset));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:calc(var(--_ds--focus, var(--ds-border-width-focus))*-1)}:is(:is(.ds-suggestion u-datalist)>:is(u-option)):focus-visible *{--_ds--focus: }@media (hover:hover) and (pointer:fine){:is(:is(.ds-suggestion u-datalist)>:is(u-option)):not([data-empty]):hover{background:var(--dsc-suggestion-option-background--selected);border-inline-start-color:var(--dsc-suggestion-option-border-color)}}.ds-suggestion:has(input:-moz-placeholder) input{background-image:linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4));background-position:calc(100% - 1.2em + var(--dsc-input-stroke-width)),calc(100% - .8em);background-repeat:no-repeat;background-size:.4em .4em;padding-inline-end:2.4em}.ds-suggestion:has(input:placeholder-shown) input{background-image:linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4));background-position:calc(100% - 1.2em + var(--dsc-input-stroke-width)),calc(100% - .8em);background-repeat:no-repeat;background-size:.4em .4em;-webkit-padding-end:2.4em;padding-inline-end:2.4em}:dir(rtl) :is(.ds-suggestion:has(input:-moz-placeholder) input){background-position:calc(1.2em - var(--dsc-input-stroke-width)),.8em}:dir(rtl) :is(.ds-suggestion:has(input:placeholder-shown) input){background-position:calc(1.2em - var(--dsc-input-stroke-width)),.8em}@media (forced-colors:active){.ds-suggestion:has(input:-moz-placeholder) input{-moz-appearance:auto;appearance:auto}.ds-suggestion:has(input:placeholder-shown) input{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}.ds-suggestion:has(input:-moz-placeholder):has(:popover-open) input{background-image:linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4))}.ds-suggestion:has(input:placeholder-shown):has(:popover-open) input{background-image:linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4))}.ds-suggestion input[inputmode=none]{box-shadow:none;outline:none}.ds-suggestion:has(input:is(:-moz-read-only,:disabled,[aria-disabled=true])) del{visibility:hidden}.ds-suggestion del[hidden],.ds-suggestion:has(input:is(:read-only,:disabled,[aria-disabled=true])) del{visibility:hidden}.ds-suggestion:has(del) input{-webkit-padding-end:calc(var(--dsc-suggestion-clear-size) + var(--dsc-suggestion-clear-gap));padding-inline-end:calc(var(--dsc-suggestion-clear-size) + var(--dsc-suggestion-clear-gap))}.ds-suggestion del{--dsc-button-size:var(--dsc-suggestion-clear-size);align-self:center;display:flex;-webkit-margin-start:calc((var(--dsc-suggestion-clear-size) + var(--dsc-suggestion-clear-gap))*-1);margin-inline-start:calc((var(--dsc-suggestion-clear-size) + var(--dsc-suggestion-clear-gap))*-1);order:999;padding:var(--dsc-suggestion-clear-padding);position:relative;scale:.75;z-index:2}:is(.ds-suggestion del):before{background:currentcolor;content:"";height:var(--dsc-suggestion-clear-size);-webkit-mask:var(--dsc-suggestion-clear-icon-url) center /contain no-repeat;mask:var(--dsc-suggestion-clear-icon-url) center /contain no-repeat;width:var(--dsc-suggestion-clear-size)}