@navikt/ds-css 1.3.34 → 1.3.37-alpha.1

package/form/error-summary.css

@@ -1,39 +0,0 @@
-:root,
-:host {
-  --navds-error-summary-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-error-summary-color-border: var(--navds-semantic-color-feedback-danger-border);
-}
-
-.navds-error-summary {
-  background-color: var(--navds-error-summary-color-background);
-  padding: var(--navds-spacing-5);
-  border: 4px solid var(--navds-error-summary-color-border);
-}
-
-.navds-error-summary--small {
-  padding: var(--navds-spacing-3);
-}
-
-.navds-error-summary:focus {
-  box-shadow: var(--navds-shadow-focus);
-  outline: none;
-}
-
-.navds-error-summary__list {
-  margin: var(--navds-spacing-3) 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--navds-spacing-3);
-  padding-left: var(--navds-spacing-6);
-  list-style: inherit;
-}
-
-.navds-error-summary__list > * {
-  color: var(--navds-global-color-blue-500);
-}
-
-.navds-error-summary--small > .navds-error-summary__list {
-  margin: var(--navds-spacing-2) 0;
-  gap: var(--navds-spacing-2);
-  padding-left: var(--navds-spacing-5);
-}

package/form/fieldset.css

@@ -1,24 +0,0 @@
-.navds-fieldset {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  min-width: 0;
-}
-
-.navds-fieldset > :not(:first-child):not(:empty) {
-  margin-top: var(--navds-spacing-2);
-}
-
-.navds-fieldset > .navds-fieldset__description:not(:empty) {
-  margin-top: var(--navds-spacing-1);
-}
-
-/* Applied when hideLegend is applied to fieldset */
-.navds-fieldset > .navds-sr-only + :not(:first-child):not(:empty) {
-  margin-top: 0;
-}
-
-.navds-fieldset:disabled > .navds-fieldset__legend,
-.navds-fieldset:disabled > .navds-fieldset__description {
-  opacity: 0.3;
-}

package/form/form.css

@@ -1,29 +0,0 @@
-.navds-form-field {
-  display: grid;
-  justify-items: start;
-  gap: var(--navds-spacing-2);
-}
-
-.navds-form-field__description {
-  margin-top: -4px;
-}
-
-.navds-form-field .navds-error-message,
-.navds-fieldset .navds-error-message {
-  display: flex;
-  gap: var(--navds-spacing-2);
-}
-
-.navds-form-field .navds-error-message::before,
-.navds-fieldset .navds-error-message::before {
-  content: "•";
-}
-
-.navds-form-field--disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-.navds-form-field__error:empty {
-  display: none;
-}

package/form/index.css

@@ -1,13 +0,0 @@
-/*
-  Order matters; rearrange with care
-*/
-@import "fieldset.css";
-@import "form.css";
-@import "error-summary.css";
-@import "confirmation-panel.css";
-@import "radio-checkbox.css";
-@import "select.css";
-@import "switch.css";
-@import "text-field.css";
-@import "textarea.css";
-@import "search.css";

package/form/radio-checkbox.css

@@ -1,182 +0,0 @@
-:root,
-:host {
-  --navds-radio-checkbox-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-radio-checkbox-color-text: var(--navds-semantic-color-text);
-  --navds-radio-checkbox-color-background-hover: var(--navds-semantic-color-interaction-primary-hover-subtle);
-  --navds-radio-checkbox-color-background-checked: var(--navds-semantic-color-interaction-primary);
-  --navds-radio-checkbox-color-shadow: var(--navds-semantic-color-border);
-  --navds-radio-checkbox-color-shadow-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-radio-checkbox-color-shadow-checked: var(--navds-semantic-color-interaction-primary);
-  --navds-radio-checkbox-color-shadow-error: var(--navds-semantic-color-interaction-danger);
-  --navds-radio-checkbox-color-label-hover: var(--navds-semantic-color-interaction-primary);
-}
-
-.navds-checkbox,
-.navds-radio {
-  position: relative;
-  width: fit-content;
-}
-
-.navds-checkbox__input,
-.navds-radio__input {
-  position: absolute;
-  width: 48px;
-  height: 48px;
-  top: 0;
-  left: -12px;
-  z-index: 1;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.navds-checkbox__label,
-.navds-radio__label {
-  padding: var(--navds-spacing-3) 0;
-  cursor: pointer;
-  display: flex;
-  gap: var(--navds-spacing-2);
-}
-
-.navds-checkbox__label::before,
-.navds-radio__label::before {
-  content: "";
-  background-color: var(--navds-radio-checkbox-color-background);
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow);
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: var(--navds-border-radius-medium);
-  flex-shrink: 0;
-}
-
-.navds-radio__label::before {
-  border-radius: var(--navds-border-radius-full);
-}
-
-.navds-checkbox__content,
-.navds-radio__content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--navds-spacing-1);
-}
-
-.navds-checkbox--small > .navds-checkbox__input,
-.navds-radio--small > .navds-radio__input {
-  width: 32px;
-  height: 32px;
-  top: 0;
-  left: -6px;
-}
-
-.navds-checkbox--small > .navds-checkbox__label,
-.navds-radio--small > .navds-radio__label {
-  padding: 6px 0;
-}
-
-.navds-checkbox--small > .navds-checkbox__label::before,
-.navds-radio--small > .navds-radio__label::before {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.navds-checkbox__input:focus + .navds-checkbox__label::before,
-.navds-radio__input:focus + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow), var(--navds-shadow-focus);
-}
-
-.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
-.navds-radio__input:hover:focus + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover), var(--navds-shadow-focus);
-}
-
-.navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
-  box-shadow: none;
-  background-color: var(--navds-radio-checkbox-color-background-checked);
-}
-
-.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  transform: translate(0.375rem, -50%);
-  background-color: var(--navds-radio-checkbox-color-background);
-  width: 0.75rem;
-  height: 0.25rem;
-  border-radius: 1px; /* Custom value OK */
-  flex-shrink: 0;
-}
-
-.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-  transform: translate(0.25rem, -50%);
-}
-
-.navds-checkbox__input:checked + .navds-checkbox__label::before {
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
-  background-position: 6px center;
-  background-repeat: no-repeat;
-  background-size: 13px;
-  box-shadow: none;
-  background-color: var(--navds-radio-checkbox-color-background-checked);
-}
-
-.navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  background-position: 4px center;
-}
-
-.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
-.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
-  box-shadow: inset 0 0 0 1px white, var(--navds-shadow-focus);
-}
-
-.navds-radio__input:checked + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked), inset 0 0 0 4px #fff;
-  background-color: var(--navds-radio-checkbox-color-background-checked);
-}
-
-.navds-radio__input:checked:focus + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked), inset 0 0 0 4px #fff, var(--navds-shadow-focus);
-}
-
-.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
-.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-  color: var(--navds-radio-checkbox-color-label-hover);
-}
-
-.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover);
-}
-
-.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
-  background-color: var(--navds-radio-checkbox-color-background-hover);
-}
-
-.navds-checkbox--error
-  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
-  + .navds-checkbox__label::before,
-.navds-radio--error
-  > .navds-radio__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
-  + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error);
-}
-
-.navds-checkbox--error
-  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
-  + .navds-checkbox__label::before,
-.navds-radio--error
-  > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
-  + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error), var(--navds-shadow-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;
-}

package/form/search.css

@@ -1,163 +0,0 @@
-:root,
-:host,
-[data-theme="light"] {
-  --navds-search-color-text: var(--navds-semantic-color-text);
-  --navds-search-color-border: var(--navds-semantic-color-border);
-  --navds-search-color-border-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-search-color-clear-hover: var(--navds-global-color-blue-500);
-  --navds-search-color-border-error: var(--navds-global-color-red-500);
-}
-
-[data-theme="dark"] {
-  --navds-search-color-text: var(--navds-semantic-color-text-inverted);
-  --navds-search-color-border: var(--navds-semantic-color-border-inverted);
-  --navds-search-color-border-hover: var(--navds-global-color-blue-200);
-  --navds-search-color-clear-hover: var(--navds-global-color-blue-200);
-  --navds-search-color-border-error: var(--navds-global-color-red-300);
-}
-
-.navds-search {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.navds-search__wrapper-inner {
-  position: relative;
-  width: 100%;
-}
-
-.navds-search__wrapper {
-  display: inline-flex;
-  align-items: center;
-}
-
-.navds-search__input {
-  padding-right: var(--navds-spacing-10);
-}
-
-.navds-form-field--small .navds-search__input {
-  padding-right: var(--navds-spacing-8);
-}
-
-.navds-search__input--simple {
-  padding-left: var(--navds-spacing-11);
-}
-
-.navds-form-field--small .navds-search__input--simple {
-  padding-left: var(--navds-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(--navds-spacing-3);
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-  font-size: 1.5rem;
-}
-
-.navds-form-field--small .navds-search__search-icon {
-  left: var(--navds-spacing-2);
-  font-size: 1rem;
-}
-
-.navds-search__button-clear {
-  position: absolute;
-  right: 0.75rem;
-  border-radius: var(--navds-border-radius-medium);
-  color: var(--navds-search-color-text);
-  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: 1rem;
-  padding: 0;
-}
-
-.navds-form-field--small .navds-search__button-clear {
-  right: 0.5rem;
-  height: 24px;
-  width: 24px;
-}
-
-.navds-search__button-clear:hover {
-  color: var(--navds-search-color-clear-hover);
-}
-
-.navds-search__button-clear:focus {
-  box-shadow: var(--navds-shadow-focus);
-  outline: none;
-}
-
-.navds-search__button-search {
-  flex-shrink: 0;
-  min-width: 64px;
-  min-height: 32px;
-  border-radius: 0;
-  border-top-right-radius: var(--navds-border-radius-medium);
-  border-bottom-right-radius: var(--navds-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: 40px;
-}
-
-.navds-search__button-search.navds-button--secondary {
-  box-shadow: -1px 0 0 0 var(--navds-search-color-border) inset, 0 1px 0 0 var(--navds-search-color-border) inset,
-    0 -1px 0 0 var(--navds-search-color-border) inset;
-}
-
-.navds-search__button-search.navds-button--secondary:hover {
-  box-shadow: -1px 0 0 0 var(--navds-search-color-border-hover) inset, 0 1px 0 0 var(--navds-search-color-border-hover) inset,
-    0 -1px 0 0 var(--navds-search-color-border-hover) inset, -1px 0 0 0 var(--navds-search-color-border-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 {
-  box-shadow: 0 0 0 1px var(--navds-search-color-border) inset, var(--navds-shadow-focus);
-}
-
-.navds-search__button-search.navds-button--secondary:focus:hover {
-  box-shadow: 0 0 0 1px var(--navds-search-color-border-hover) inset, var(--navds-shadow-focus);
-}
-
-.navds-search__button-search.navds-button--secondary:focus:active {
-  box-shadow: 0 0 0 1px white inset, var(--navds-shadow-focus);
-}
-
-/* Error-handling */
-.navds-search--error .navds-search__input:not(:hover):not(:disabled) {
-  border-color: var(--navds-search-color-border-error);
-  box-shadow: inset 0 0 0 1px var(--navds-search-color-border-error);
-}
-
-.navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
-  box-shadow: inset 0 0 0 1px var(--navds-search-color-border-error), var(--navds-shadow-focus);
-}
-
-/* Focus layering */
-.navds-search__input:focus,
-.navds-search__button-clear,
-.navds-search__button-search:focus {
-  z-index: 1;
-}

package/form/select.css

@@ -1,69 +0,0 @@
-:root,
-:host {
-  --navds-select-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-select-color-border: var(--navds-semantic-color-border);
-  --navds-select-color-border-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-select-color-border-error: var(--navds-semantic-color-interaction-danger);
-  --navds-select-color-shadow-error: var(--navds-semantic-color-interaction-danger);
-  --navds-select-color-border-disabled: var(--navds-global-color-gray-400);
-  --navds-select-color-background-disabled: var(--navds-semantic-color-component-background-alternate);
-}
-
-.navds-select__input {
-  appearance: none;
-  background-color: var(--navds-select-color-background);
-  border-radius: var(--navds-border-radius-medium);
-  border: 1px solid var(--navds-select-color-border);
-  width: 100%;
-  box-sizing: border-box;
-  min-height: 48px;
-  display: inline-block;
-  position: relative;
-  padding: 0.5rem;
-  padding-right: 2rem;
-}
-
-.navds-select__input:hover {
-  border-color: var(--navds-select-color-border-hover);
-}
-
-.navds-select__input:focus {
-  outline: none;
-  box-shadow: var(--navds-shadow-focus);
-}
-
-.navds-select__container {
-  position: relative;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  color: var(--navds-semantic-color-text);
-}
-
-.navds-select__chevron {
-  position: absolute;
-  font-size: 1rem;
-  right: 0.5rem;
-  pointer-events: none;
-}
-
-.navds-form-field--small .navds-select__input {
-  min-height: 32px;
-  padding: 0.25rem;
-  padding-right: 2rem;
-}
-
-/**
-  Error handling
-*/
-.navds-select--error > * select:not(:hover):not(:focus):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--navds-select-color-shadow-error);
-  border-color: var(--navds-select-color-border-error);
-}
-
-.navds-select__input:disabled {
-  background-color: var(--navds-select-color-background);
-  border-color: var(--navds-select-color-border);
-  box-shadow: none;
-  cursor: not-allowed;
-}

package/form/switch.css

@@ -1,189 +0,0 @@
-:root,
-:host {
-  --navds-switch-color-label: var(--navds-semantic-color-text);
-  --navds-switch-color-label-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-switch-color-track-background: var(--navds-semantic-color-text-muted);
-  --navds-switch-color-track-background-checked: var(--navds-semantic-color-feedback-success-border);
-  --navds-switch-color-track-background-hover: var(--navds-global-color-gray-800);
-  --navds-switch-color-track-background-hover-checked: var(--navds-semantic-color-feedback-success-icon);
-  --navds-switch-color-track-shadow-inner-focus: var(--navds-semantic-color-component-background-light);
-  --navds-switch-color-thumb: var(--navds-semantic-color-component-background-light);
-  --navds-switch-color-thumb-icon: var(--navds-semantic-color-text-muted);
-  --navds-switch-color-thumb-icon-checked: var(--navds-semantic-color-feedback-success-border);
-  --navds-switch-color-thumb-loader-checked: var(--navds-semantic-color-feedback-success-border);
-}
-
-.navds-switch {
-  position: relative;
-  min-height: 48px;
-  width: fit-content;
-}
-
-.navds-switch--right {
-  width: auto;
-}
-
-.navds-switch--small {
-  position: relative;
-  min-height: 32px;
-}
-
-/* Input */
-.navds-switch__input {
-  cursor: pointer;
-  position: absolute;
-  z-index: 1;
-  width: 48px;
-  height: 48px;
-  opacity: 0;
-  top: 0;
-}
-
-.navds-switch--small > .navds-switch__input {
-  height: 32px;
-  top: 0;
-}
-
-/* Label */
-.navds-switch__label-wrapper {
-  cursor: pointer;
-  color: var(--navds-switch-color-label);
-}
-
-.navds-switch__content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--navds-spacing-1);
-  padding: 0.75rem 0 0.75rem 3.25rem;
-}
-
-.navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: 0.75rem 3.25rem 0.75rem 0;
-}
-
-.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--navds-spacing-2) - 2px) 0 calc(var(--navds-spacing-2) - 2px) 3.25rem;
-}
-
-.navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--navds-spacing-2) - 2px) 3.25rem calc(var(--navds-spacing-2) - 2px) 0;
-}
-
-.navds-switch--with-description,
-.navds-switch--small > .navds-switch__label-wrapper > .navds-switch--with-description {
-  padding-bottom: 0;
-}
-
-.navds-switch__input:hover ~ .navds-switch__label-wrapper,
-.navds-switch__label-wrapper:hover {
-  color: var(--navds-switch-color-label-hover);
-}
-
-.navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
-  color: inherit;
-}
-
-/* Track */
-.navds-switch__track {
-  width: 44px;
-  height: 24px;
-  background-color: var(--navds-switch-color-track-background);
-  position: absolute;
-  top: var(--navds-spacing-3);
-  left: 0;
-  border-radius: var(--navds-border-radius-medium);
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.navds-switch--small > .navds-switch__track {
-  top: var(--navds-spacing-1);
-}
-
-.navds-switch--right > .navds-switch__input,
-.navds-switch--right > .navds-switch__track {
-  right: 0;
-  left: auto;
-}
-
-.navds-switch__input:checked ~ .navds-switch__track {
-  background-color: var(--navds-switch-color-track-background-checked);
-}
-
-.navds-switch__input:hover ~ .navds-switch__track {
-  background-color: var(--navds-switch-color-track-background-hover);
-}
-
-.navds-switch__input:hover:checked ~ .navds-switch__track {
-  background-color: var(--navds-switch-color-track-background-hover-checked);
-}
-
-.navds-switch__input:disabled ~ .navds-switch__track {
-  background-color: var(--navds-switch-color-track-background);
-}
-
-.navds-switch__input:checked:disabled ~ .navds-switch__track {
-  background-color: var(--navds-switch-color-track-background-checked);
-}
-
-.navds-switch__input:focus ~ .navds-switch__track {
-  box-shadow: 0 0 0 1px var(--navds-switch-color-track-shadow-inner-focus), var(--navds-shadow-focus);
-}
-
-/* Thumb */
-.navds-switch__thumb {
-  background-color: var(--navds-switch-color-thumb);
-  color: var(--navds-switch-color-thumb-icon);
-  border-radius: var(--navds-border-radius-small);
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  transform: translateX(0);
-  left: 2px;
-  top: 2px;
-  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(20px);
-  color: var(--navds-switch-color-thumb-icon-checked);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(2px);
-  }
-
-  .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(18px);
-  }
-}
-
-.navds-switch__input:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(0);
-}
-
-.navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(20px);
-}
-
-/* Loader */
-.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb .navds-loader__foreground {
-  stroke: var(--navds-switch-color-thumb-loader-checked);
-}
-
-/* Disabled */
-.navds-switch__input:disabled {
-  appearance: none;
-}
-
-.navds-switch--disabled:not(.navds-switch--loading) {
-  opacity: 0.3;
-}
-
-.navds-switch__input:disabled,
-.navds-switch__input:disabled ~ .navds-switch__label-wrapper {
-  cursor: not-allowed;
-}