@navikt/ds-css 7.40.0 → 8.0.1

package/form/radio-checkbox.css

@@ -1,397 +0,0 @@
-.navds-checkbox,
-.navds-radio {
-  position: relative;
-  width: fit-content;
-}
-
-.navds-checkbox__input,
-.navds-radio__input {
-  position: absolute;
-  width: 3rem;
-  height: 3rem;
-  top: 0;
-  left: -0.75rem;
-  z-index: 1;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.navds-checkbox__label,
-.navds-radio__label {
-  padding: var(--a-spacing-3) 0;
-  cursor: pointer;
-  display: flex;
-  gap: var(--a-spacing-2);
-
-  --__ac-radio-checkbox-readonly-bg: var(--a-surface-subtle);
-  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle);
-}
-
-.navds-checkbox__label::before,
-.navds-radio__label::before {
-  content: "";
-  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  border-radius: var(--a-border-radius-small);
-  flex-shrink: 0;
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
-  width: calc(1.5rem - 0.25rem);
-  height: calc(1.5rem - 0.25rem);
-  margin-block: 2px;
-  margin-inline: 2px;
-}
-
-.navds-radio__label::before {
-  border-radius: var(--a-border-radius-full);
-}
-
-.navds-checkbox__content,
-.navds-radio__content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.navds-checkbox--small > .navds-checkbox__input,
-.navds-radio--small > .navds-radio__input {
-  width: 2rem;
-  height: 2rem;
-  top: 0;
-  left: -0.375rem;
-}
-
-.navds-checkbox--small > .navds-checkbox__label,
-.navds-radio--small > .navds-radio__label {
-  padding: var(--a-spacing-1-alt) 0;
-}
-
-.navds-checkbox--small > .navds-checkbox__label::before,
-.navds-radio--small > .navds-radio__label::before {
-  width: calc(1.25rem - 0.25rem);
-  height: calc(1.25rem - 0.25rem);
-}
-
-.navds-checkbox__input:focus + .navds-checkbox__label::before,
-.navds-radio__input:focus + .navds-radio__label::before {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
-    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
-    0 0 0 4px var(--a-border-focus);
-}
-
-.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
-.navds-radio__input:hover:focus + .navds-radio__label::before {
-  box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
-    0 0 0 4px var(--a-border-focus);
-}
-
-/* Temp-fix to remove new darkside indeterminate node */
-.navds-checkbox__icon-indeterminate {
-  display: none;
-}
-
-.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-  content: "";
-  position: absolute;
-  top: var(--a-spacing-6);
-  transform: translate(var(--a-spacing-1-alt), -50%);
-  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  width: 0.75rem;
-  height: 0.25rem;
-  border-radius: 1px;
-  flex-shrink: 0;
-}
-
-.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-  transform: translate(0.25rem, -50%);
-  top: var(--a-spacing-4);
-}
-
-.navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
-  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
-}
-
-.navds-checkbox__input:where(:checked, :indeterminate):hover + .navds-checkbox__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected-hover));
-  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected-hover));
-}
-
-.navds-checkbox__input:where(:not(:checked)) + .navds-checkbox__label > .navds-checkbox__icon {
-  display: none;
-}
-
-.navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
-  color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  position: absolute;
-  height: 1.5rem;
-  transform: translate(var(--a-spacing-1-alt));
-  pointer-events: none;
-
-  /* Fixed edcase where when using in shadow-dom, svg will not center */
-  display: flex;
-  align-items: center;
-}
-
-.navds-checkbox--small .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
-  transform: translate(0.25rem, -10%);
-}
-
-/* Tailwind sets all svg to block */
-.navds-checkbox__icon > svg {
-  display: block;
-
-  /* Safari does not support inline rem-values in SVG */
-  width: 0.8125rem;
-  height: 0.625rem;
-}
-
-.navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  background-position: 0.25rem center;
-}
-
-.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
-.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
-  box-shadow:
-    0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
-    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
-    0 0 0 4px var(--a-border-focus);
-}
-
-.navds-radio__input:checked + .navds-radio__label::before {
-  box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
-    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
-}
-
-.navds-radio__input:checked:focus + .navds-radio__label::before {
-  box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
-    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
-    0 0 0 4px var(--a-border-focus);
-}
-
-.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
-.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-  color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
-}
-
-.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus) + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled, :checked, :focus) + .navds-radio__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
-}
-
-.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label::before {
-  background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
-}
-
-.navds-checkbox--error > .navds-checkbox__input:not(:hover, :disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:not(:hover, :disabled, :checked) + .navds-radio__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
-}
-
-.navds-checkbox--error
-  > .navds-checkbox__input:focus:not(:hover, :disabled, :checked, :indeterminate)
-  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus:not(:hover, :disabled, :checked) + .navds-radio__label::before {
-  box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
-    0 0 0 4px var(--a-border-focus);
-}
-
-.navds-checkbox--error
-  > .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus)
-  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:hover:not(:disabled, :checked, :focus) + .navds-radio__label::before {
-  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
-}
-
-.navds-checkbox--error
-  > .navds-checkbox__input:focus:hover:not(:disabled, :checked, :indeterminate)
-  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled, :checked) + .navds-radio__label::before {
-  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-  box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
-    0 0 0 4px var(--a-border-focus);
-}
-
-.navds-checkbox--disabled,
-.navds-radio--disabled {
-  opacity: 0.3;
-}
-
-.navds-checkbox--disabled > .navds-checkbox__input,
-.navds-checkbox--disabled > .navds-checkbox__label,
-.navds-radio--disabled > .navds-radio__input,
-.navds-radio--disabled > .navds-radio__label {
-  cursor: not-allowed;
-}
-
-/* Readonly */
-.navds-checkbox--readonly > :where(.navds-checkbox__input, .navds-checkbox__label),
-.navds-radio--readonly > :where(.navds-radio__input, .navds-radio__label) {
-  cursor: default;
-}
-
-.navds-checkbox--readonly .navds-checkbox__label-text {
-  display: inline-flex;
-}
-
-.navds-checkbox--readonly > .navds-checkbox__input:hover + .navds-checkbox__label,
-.navds-radio--readonly > .navds-radio__input:hover + .navds-radio__label {
-  color: var(--a-text-default);
-}
-
-.navds-checkbox--readonly > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
-.navds-checkbox--readonly > .navds-checkbox__input:hover:not(:checked, :indeterminate, :focus) + .navds-checkbox__label::before,
-.navds-radio--readonly > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before,
-.navds-radio--readonly > .navds-radio__input:hover:not(:checked, :focus) + .navds-radio__label::before {
-  background-color: var(--__ac-radio-checkbox-readonly-bg);
-  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
-}
-
-.navds-checkbox--readonly > .navds-checkbox__input:focus + .navds-checkbox__label::before,
-.navds-radio--readonly > .navds-radio__input:focus + .navds-radio__label::before {
-  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle), var(--a-shadow-focus);
-}
-
-.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  background-color: var(--__ac-radio-checkbox-readonly-bg);
-  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
-}
-
-.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
-  color: var(--a-icon-subtle);
-}
-
-.navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
-  background-color: var(--a-icon-subtle);
-  box-shadow:
-    0 0 0 2px var(--__ac-radio-checkbox-readonly-border),
-    inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
-}
-
-.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
-  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
-  background-color: var(--__ac-radio-checkbox-readonly-bg);
-}
-
-.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-  background-color: var(--a-icon-subtle);
-}
-
-@media screen and (forced-colors: active) {
-  .navds-checkbox__input:focus + .navds-checkbox__label::before,
-  .navds-radio__input:focus + .navds-radio__label::before {
-    outline-color: highlight;
-  }
-
-  .navds-checkbox,
-  .navds-radio {
-    --__ac-radio-checkbox-high-contrast-bg: field;
-    --__ac-radio-checkbox-high-contrast-text: fieldtext;
-    --__ac-radio-checkbox-high-contrast-highlight: highlight;
-  }
-
-  .navds-checkbox__label::before,
-  .navds-radio__label::before {
-    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
-    background-color: var(--__ac-radio-checkbox-high-contrast-bg);
-  }
-
-  .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
-    color: var(--__ac-radio-checkbox-high-contrast-text);
-  }
-
-  .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-    background-color: var(--__ac-radio-checkbox-high-contrast-text);
-  }
-
-  .navds-radio__input:checked + .navds-radio__label::before {
-    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
-    outline: 3px solid var(--__ac-radio-checkbox-high-contrast-bg);
-    outline-offset: -4px;
-    background-color: var(--__ac-radio-checkbox-high-contrast-text);
-  }
-
-  .navds-radio__input:checked:focus + .navds-radio__label::before {
-    border: 1px solid var(--__ac-radio-checkbox-high-contrast-bg);
-    outline: 2px solid highlight;
-    outline-offset: 2px;
-  }
-
-  :not(.navds-checkbox--readonly) > .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
-  :not(.navds-radio--readonly) > .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-    color: highlight;
-  }
-
-  .navds-checkbox__input:focus + .navds-checkbox__label::before {
-    outline: 2px solid var(--__ac-radio-checkbox-high-contrast-highlight);
-  }
-
-  .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
-    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
-    background-color: var(--__ac-radio-checkbox-high-contrast-bg);
-  }
-
-  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-    background-color: var(--__ac-radio-checkbox-high-contrast-text);
-  }
-
-  .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
-    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
-    outline: 3px solid var(--__ac-radio-checkbox-high-contrast-bg);
-    outline-offset: -4px;
-    background-color: var(--__ac-radio-checkbox-high-contrast-text);
-  }
-
-  .navds-checkbox--disabled,
-  .navds-radio--disabled {
-    opacity: 1;
-
-    --__ac-radio-checkbox-high-contrast-bg: field;
-    --__ac-radio-checkbox-high-contrast-text: graytext;
-  }
-
-  :is(.navds-checkbox--disabled, .navds-radio--disabled) :is(.navds-checkbox__label, .navds-radio__label) {
-    color: graytext;
-  }
-}
-
-@media print {
-  .navds-checkbox__label::before,
-  .navds-radio__label::before {
-    border: 1px solid black;
-  }
-
-  .navds-radio__input:checked + .navds-radio__label::before {
-    border: 1px solid black;
-    outline: 4px solid black;
-    outline-offset: -5px;
-  }
-
-  .navds-checkbox__label::before {
-    outline: 2px solid black;
-  }
-
-  .navds-checkbox__icon {
-    height: calc(1.5rem - 4px) !important;
-    margin-top: 2px;
-  }
-
-  .navds-checkbox--small .navds-checkbox__icon {
-    height: calc(1.5rem - 9px) !important;
-    margin-top: 4px;
-  }
-
-  .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-    outline: 2px solid black;
-    outline-offset: -2px;
-  }
-}

package/form/search.css

@@ -1,228 +0,0 @@
-[data-theme="dark"] {
-  --__ac-search-button-border: var(--a-border-on-inverted);
-  --__ac-search-button-border-hover: var(--a-blue-200);
-  --__ac-search-clear-icon: var(--a-white);
-  --__ac-search-clear-icon-hover: var(--a-blue-200);
-  --__ac-search-error-border: var(--a-red-300);
-}
-
-[data-theme="light"] {
-  --__ac-search-button-border: initial;
-  --__ac-search-button-border-hover: initial;
-  --__ac-search-clear-icon: initial;
-  --__ac-search-clear-icon-hover: initial;
-  --__ac-search-error-border: initial;
-}
-
-.navds-search {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.navds-search__wrapper-inner {
-  position: relative;
-  width: 100%;
-}
-
-.navds-search--with-size :where(.navds-search__wrapper-inner) {
-  width: inherit;
-}
-
-.navds-search__wrapper {
-  display: inline-flex;
-  align-items: center;
-}
-
-.navds-search__input {
-  padding-right: var(--a-spacing-10);
-}
-
-.navds-form-field--small .navds-search__input {
-  padding-right: var(--a-spacing-8);
-}
-
-.navds-search__input--simple {
-  padding-left: var(--a-spacing-11);
-}
-
-.navds-form-field--small .navds-search__input--simple {
-  padding-left: var(--a-spacing-7);
-}
-
-.navds-search__input:not(.navds-search__input--simple) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.navds-search__search-icon {
-  position: absolute;
-  left: var(--a-spacing-3);
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-  font-size: 1.5rem;
-}
-
-.navds-form-field--small .navds-search__search-icon {
-  left: var(--a-spacing-2);
-  font-size: 1rem;
-}
-
-.navds-search__button-clear {
-  position: absolute;
-  right: 0.75rem;
-  border-radius: var(--a-border-radius-medium);
-  color: var(--ac-search-clear-icon, var(--__ac-search-clear-icon, var(--a-text-default)));
-  height: 32px;
-  width: 32px;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background: none;
-  border: none;
-  font-size: 1.25rem;
-  padding: 0;
-}
-
-.navds-form-field--small .navds-search__button-clear {
-  right: 0.5rem;
-  height: 24px;
-  width: 24px;
-}
-
-.navds-search__button-clear:hover {
-  color: var(--ac-search-clear-icon-hover, var(--__ac-search-clear-icon-hover, var(--a-text-action-hover)));
-}
-
-.navds-search__button-clear:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-search__button-clear:focus {
-    outline: 2px solid transparent;
-    box-shadow: var(--a-shadow-focus);
-  }
-}
-
-.navds-search__button-search {
-  flex-shrink: 0;
-  min-width: 4rem;
-  min-height: 2rem;
-  border-radius: 0;
-  border-top-right-radius: var(--a-border-radius-medium);
-  border-bottom-right-radius: var(--a-border-radius-medium);
-}
-
-.navds-form-field--small .navds-search__button-search svg {
-  font-size: 1rem;
-}
-
-.navds-form-field--small .navds-search__button-search {
-  min-width: 2.5rem;
-}
-
-.navds-search__button-search.navds-button--secondary {
-  box-shadow:
-    -1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-    0 1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-    0 -1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset;
-}
-
-.navds-search__button-search.navds-button--secondary:where(:hover, :active) {
-  box-shadow:
-    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover)));
-  z-index: 1;
-}
-
-.navds-search__wrapper-inner:focus-within + .navds-search__button-search.navds-button--secondary:hover {
-  z-index: auto;
-}
-
-.navds-search__button-search.navds-button--secondary:focus-visible {
-  box-shadow:
-    0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-    var(--a-shadow-focus);
-}
-
-.navds-search__button-search.navds-button--secondary:focus-visible:hover {
-  box-shadow:
-    0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    var(--a-shadow-focus);
-}
-
-.navds-search__button-search.navds-button--secondary:focus-visible:active {
-  box-shadow:
-    0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-search__button-search.navds-button--secondary:focus {
-    box-shadow:
-      0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-      var(--a-shadow-focus);
-  }
-
-  .navds-search__button-search.navds-button--secondary:focus:hover {
-    box-shadow:
-      0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
-      var(--a-shadow-focus);
-  }
-
-  .navds-search__button-search.navds-button--secondary:focus:active {
-    box-shadow:
-      0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
-      var(--a-shadow-focus);
-  }
-}
-
-/* Error-handling */
-.navds-search--error .navds-search__input:not(:hover, :disabled) {
-  border-color: var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
-  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
-}
-
-.navds-search--error .navds-search__input:focus-visible:not(:hover, :disabled) {
-  box-shadow:
-    inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
-    var(--a-shadow-focus);
-}
-
-/* Focus layering */
-.navds-search__input:focus-visible,
-.navds-search__button-clear,
-.navds-search__button-search:focus-visible {
-  z-index: 1;
-}
-
-@supports not selector(:focus-visible) {
-  .navds-search--error .navds-search__input:focus:not(:hover, :disabled) {
-    box-shadow:
-      inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
-      var(--a-shadow-focus);
-  }
-
-  .navds-search__input:focus,
-  .navds-search__button-search:focus {
-    z-index: 1;
-  }
-}
-
-@media (forced-colors: active) {
-  .navds-modal {
-    outline: 2px solid transparent;
-  }
-
-  .navds-search__button-clear:hover {
-    color: highlight;
-  }
-}