/* used */
/* not used */
/* TODO: integrate this logic in the proper structure */
nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range {
  background: var(--components-slider-track-filled-hover);
}
nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb {
  border-color: var(--components-slider-track-filled-hover);
}
nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range {
  background: var(--components-slider-track-filled-focus);
}
nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb {
  border-color: var(--components-slider-track-filled-focus);
}
nv-fieldslider[error] .slider-container .track-container .track .track-range {
  background: var(--components-slider-track-filled-error);
}
nv-fieldslider[error] .slider-container .track-container .track .thumb {
  border-color: var(--components-slider-track-filled-error);
}
nv-fieldslider[error] .slider-container .track-container .track .thumb:hover {
  border-color: var(--components-slider-track-filled-error);
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);
  outline-offset: calc(var(--focus-outline-offset) * 1);
  background-color: var(--components-slider-handler-background-error);
}
nv-fieldslider[error] .slider-container .track-container .track .thumb:focus {
  border-color: var(--components-slider-track-filled-error);
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);
  outline-offset: calc(var(--focus-outline-offset) * 1);
  background-color: var(--components-slider-track-filled-error);
}
nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range {
  background: var(--components-slider-track-filled-error);
}
nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb {
  border-color: var(--components-slider-track-filled-error);
}

nv-fieldslider {
  --nv-field-border-default: var(--components-form-field-border-default);
  --nv-field-border-hover: var(--components-form-field-border-hover);
  --nv-field-border-focus: var(--components-form-field-border-focus);
  --nv-field-border-disabled: var(--components-form-field-border-default);
  --nv-field-border-readonly: var(--components-form-field-border-default);
  --nv-field-focus-box-shadow: var(--color-focus-brand);
  --nv-field-background: var(--components-form-field-background-default);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--form-gap-y);
  box-sizing: border-box;
  max-width: 480px;
}
nv-fieldslider .slider-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--form-gap-x);
}
nv-fieldslider .slider-container .track-container {
  position: relative;
  flex: 1;
  height: calc(var(--slider-handler-size-min) + 0.25rem);
  padding: calc(var(--slider-handler-size-min) / 2) 0;
}
nv-fieldslider .slider-container .track-container .track {
  position: relative;
  height: var(--slider-track-height);
  background: var(--components-slider-track-background);
  border-radius: var(--slider-track-radius);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
nv-fieldslider .slider-container .track-container .track::after {
  content: "";
  position: absolute;
  top: calc(-13px + var(--slider-track-height) / 2);
  left: 0;
  width: 100%;
  height: 26px;
  background: rgba(255, 255, 255, 0);
}
nv-fieldslider .slider-container .track-container .track .track-range {
  position: absolute;
  top: 0;
  height: var(--slider-track-height);
  background: var(--components-slider-track-filled-default);
  border-radius: var(--slider-track-radius);
  pointer-events: none;
}
nv-fieldslider .slider-container .track-container .track .thumb {
  position: absolute;
  top: 50%;
  width: var(--slider-handler-size-min);
  height: var(--slider-handler-size-min);
  background: #ffffff;
  border: var(--slider-handler-stroke) solid var(--components-slider-track-filled-default);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: width 0.2s, height 0.2s, box-shadow 0.2s, background-color 0.2s;
}
nv-fieldslider .slider-container .track-container .track .thumb:after {
  content: "";
  position: absolute;
  top: -7px;
  left: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  background: rgba(255, 255, 255, 0);
}
nv-fieldslider .slider-container .track-container .track .thumb:hover {
  width: var(--slider-handler-size-max);
  height: var(--slider-handler-size-max);
  border-color: var(--components-slider-track-filled-hover);
}
nv-fieldslider .slider-container .track-container .track .thumb:focus {
  width: var(--slider-handler-size-min);
  height: var(--slider-handler-size-min);
  border-color: var(--components-slider-track-filled-focus);
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
  outline-offset: calc(var(--focus-outline-offset) * 1);
  transition: outline;
  background: var(--components-slider-handler-background-focus);
}
nv-fieldslider .slider-container .track-container .track .thumb:active {
  cursor: grabbing;
  background: var(--components-slider-handler-background-hover);
}
nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip {
  position: absolute;
  top: 25px;
  left: 50%;
  background-color: var(--components-tooltip-background);
  color: var(--components-tooltip-text);
  padding: 5px;
  border-radius: var(--tooltip-radius);
  font-size: var(--tooltip-font-size);
  z-index: 10;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  transform: translateX(-50%);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  transform-style: preserve-3d;
}
nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip:after {
  content: "";
  background: var(--components-tooltip-background);
  box-shadow: none;
  border: none;
  position: absolute;
  border-bottom-color: transparent;
  border-right-color: transparent;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  border-radius: 1px;
  top: -3px;
  left: 50%;
  margin-left: -3px;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
nv-fieldslider .slider-container .track-container .track .thumb:hover .thumb-tooltip, nv-fieldslider .slider-container .track-container .track .thumb:active .thumb-tooltip, nv-fieldslider .slider-container .track-container .track .thumb:focus .thumb-tooltip {
  opacity: 1;
}
nv-fieldslider .slider-container .track-container .track-ticks {
  position: relative;
  height: 1rem;
  margin-top: 0.25rem;
}
nv-fieldslider .slider-container .track-container .track-ticks .track-tick {
  position: absolute;
  top: 0;
  width: var(--slider-tick-height);
  height: var(--slider-tick-height);
  background: var(--components-form-field-border-default);
  border-radius: 50%;
  transform: translate(-50%, 0);
  pointer-events: none;
}
nv-fieldslider .slider-container .track-container .track-ticks .track-tick:first-of-type {
  transform: translate(0, 0);
}
nv-fieldslider .slider-container .track-container .track-ticks .track-tick:last-of-type {
  transform: translate(-100%, 0);
}
nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label {
  position: absolute;
  top: calc(var(--slider-tick-height) + 0.25rem);
  left: 50%;
  color: var(--components-form-field-border-default);
  transform: translateX(-50%);
  white-space: nowrap;
}
.track-tick-first nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label {
  left: 0;
  transform: translateX(0);
}
.track-tick-last nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label {
  left: 100%;
  transform: translateX(-100%);
}
nv-fieldslider .slider-container .input-container {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: var(--form-field-radius);
  border-width: 1px;
  border-style: solid;
  border-color: var(--nv-field-border-default);
  opacity: var(--components-form-opacity-default, 1);
  background: var(--nv-field-background);
  transition: all 150ms ease-out;
}
nv-fieldslider .slider-container .input-container:hover {
  border-color: var(--nv-field-border-hover);
}
nv-fieldslider .slider-container .input-container:focus-within, nv-fieldslider .slider-container .input-container:focus-within:hover, nv-fieldslider .slider-container .input-container:focus, nv-fieldslider .slider-container .input-container:focus:hover {
  border-color: var(--nv-field-border-focus);
  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
}
nv-fieldslider .slider-container .input-container:has(input:read-only) {
  background-color: var(--components-form-field-background-readonly);
  border-color: var(--nv-field-border-readonly);
}
nv-fieldslider .slider-container .input-container:has(input:disabled) {
  opacity: 0.5;
  background-color: var(--components-form-field-background-disabled);
  border-color: var(--nv-field-border-disabled);
}
nv-fieldslider .slider-container .input-container {
  width: 90px;
  flex-grow: unset;
}
nv-fieldslider .slider-container .input-container input {
  display: flex;
  align-items: center;
  flex: 1 0 0;
  overflow: hidden;
  background-color: transparent;
  color: var(--components-form-field-content-text);
  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);
  font-size: var(--form-field-font-size);
  font-style: normal;
  font-weight: var(--font-weight-medium-emphasis);
  line-height: var(--form-field-line-height);
  width: 100%;
}
nv-fieldslider .slider-container .input-container input:focus {
  outline: none;
}
nv-fieldslider .slider-container .input-container input::placeholder {
  overflow: hidden;
  color: var(--components-form-field-content-placeholder);
  text-overflow: ellipsis;
  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
  font-size: var(--form-field-font-size);
  font-style: normal;
  font-weight: var(--font-weight-low-emphasis);
  line-height: var(--form-field-line-height);
}
nv-fieldslider .slider-container .input-container input {
  /* Hide Edge built-in password reveal and clear icons */
}
nv-fieldslider .slider-container .input-container input[type=password]::-ms-clear, nv-fieldslider .slider-container .input-container input[type=password]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
nv-fieldslider .slider-container .input-container .label-before {
  margin-left: var(--spacing-2);
  color: var(--components-form-field-icon-default);
}
nv-fieldslider .slider-container .input-container .label-after {
  margin-right: var(--spacing-2);
  color: var(--components-form-field-icon-default);
}
nv-fieldslider[fluid]:not([fluid=false]) {
  max-width: unset;
}
nv-fieldslider[error]:not([error=false]) {
  --nv-field-border-default: var(--components-form-field-border-error);
  --nv-field-border-hover: var(--nv-field-border-default);
  --nv-field-border-focus: var(--nv-field-border-default);
  --nv-field-border-disabled: var(--nv-field-border-default);
  --nv-field-border-readonly: var(--nv-field-border-default);
  --nv-field-focus-box-shadow: var(--color-focus-destructive-in-field);
}
nv-fieldslider[success]:not([success=false]) {
  --nv-field-border-default: var(--components-form-field-border-success);
  --nv-field-border-hover: var(--nv-field-border-default);
  --nv-field-border-focus: var(--nv-field-border-default);
  --nv-field-border-disabled: var(--nv-field-border-default);
  --nv-field-border-readonly: var(--nv-field-border-default);
  --nv-field-focus-box-shadow: var(--color-focus-success);
}
nv-fieldslider[readonly]:not([readonly=false]) {
  --nv-field-border-default: var(--components-form-field-border-readonly);
  --nv-field-border-hover: var(--nv-field-border-default);
  --nv-field-border-focus: var(--components-form-field-border-focus);
  --nv-field-border-disabled: var(--nv-field-border-default);
  --nv-field-border-readonly: var(--nv-field-border-default);
  --nv-field-background: var(--components-form-field-background-readonly);
}
nv-fieldslider[readonly]:not([readonly=false]) .track,
nv-fieldslider[readonly]:not([readonly=false]) .thumb {
  cursor: default;
}
nv-fieldslider label {
  display: flex;
  align-items: center;
  gap: var(--form-label-gap);
  align-self: stretch;
  color: var(--components-form-text-label-default);
  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
  font-size: var(--form-label-font-size);
  font-style: normal;
  font-weight: var(--font-weight-medium-emphasis);
  line-height: var(--form-label-line-height);
}
nv-fieldslider nv-icon.validation {
  color: var(--nv-field-border-default);
}
nv-fieldslider[hide-label]:not([hide-label=false]) label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
nv-fieldslider[has-field]:not([has-field=false]) .thumb-tooltip {
  display: none;
}
nv-fieldslider > .description {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: var(--spacing-1);
  color: var(--components-form-text-description-default);
  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
  font-size: var(--form-description-font-size);
  font-style: normal;
  line-height: var(--form-description-line-height);
}
nv-fieldslider > .error-description {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: var(--spacing-1);
  color: var(--components-form-text-description-default);
  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
  font-size: var(--form-description-font-size);
  font-style: normal;
  line-height: var(--form-description-line-height);
  color: var(--components-form-text-description-error);
}
nv-fieldslider > .error-description[hidden] {
  display: none;
}