/* 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]:not([error=false]) .slider-container .track-container .track .track-range {
  background: var(--components-slider-track-filled-error);
}
nv-fieldslider[error]:not([error=false]) .slider-container .track-container .track .thumb {
  border-color: var(--components-slider-track-filled-error);
}
nv-fieldslider[error]:not([error=false]) .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]:not([error=false]) .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]:not([error=false]) .slider-container .track-container:has(.thumb:hover) .track-range {
  background: var(--components-slider-track-filled-error);
}
nv-fieldslider[error]:not([error=false]) .slider-container .track-container:has(.thumb:hover) .thumb {
  border-color: var(--components-slider-track-filled-error);
}
nv-fieldslider[success]:not([success=false]) .slider-container .track-container .track .track-range {
  background: var(--components-form-field-border-success);
}
nv-fieldslider[success]:not([success=false]) .slider-container .track-container .track .thumb {
  border-color: var(--components-form-field-border-success);
}
nv-fieldslider[success]:not([success=false]) .slider-container .track-container .track .thumb:hover {
  border-color: var(--components-form-field-border-success);
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-form-field-border-success);
  outline-offset: calc(var(--focus-outline-offset) * 1);
  background-color: var(--components-slider-handler-background-hover);
}
nv-fieldslider[success]:not([success=false]) .slider-container .track-container .track .thumb:focus {
  border-color: var(--components-form-field-border-success);
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-form-field-border-success);
  outline-offset: calc(var(--focus-outline-offset) * 1);
  background-color: var(--components-form-field-border-success);
}
nv-fieldslider[success]:not([success=false]) .slider-container .track-container:has(.thumb:hover) .track-range {
  background: var(--components-form-field-border-success);
}
nv-fieldslider[success]:not([success=false]) .slider-container .track-container:has(.thumb:hover) .thumb {
  border-color: var(--components-form-field-border-success);
}

/* Variants */
/* Spacing values: the Figma file-upload component tokens */
nv-fileupload {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
}
nv-fileupload > .field-label {
  display: flex;
  align-items: center;
  gap: var(--form-label-gap);
}
nv-fileupload > .field-label > .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);
  width: fit-content;
}
nv-fileupload[required]:not([required=false]) > .field-label > .label::after {
  content: "*";
  color: var(--components-form-text-required);
  font-weight: var(--font-weight-high-emphasis);
}
nv-fileupload > .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-fileupload > .file-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
nv-fileupload > .file-list > li {
  display: block;
  min-width: 0;
}
nv-fileupload > .summary {
  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium-emphasis);
  line-height: var(--line-height-sm);
  color: var(--color-feedback-error-low-text);
}
nv-fileupload > .summary:empty {
  display: none;
}
nv-fileupload.size-sm {
  gap: var(--file-upload-sm-gap-y);
  /* The label and its description read as one block above the dropzone. */
}
nv-fileupload.size-sm > .field-label + .description {
  margin-top: calc(var(--spacing-1) - var(--file-upload-sm-gap-y));
}
nv-fileupload.size-sm > .file-list {
  gap: var(--file-upload-file-list-sm-gap-y);
}
nv-fileupload.size-md {
  gap: var(--file-upload-md-gap-y);
  /* The label and its description read as one block above the dropzone. */
}
nv-fileupload.size-md > .field-label + .description {
  margin-top: calc(var(--spacing-1) - var(--file-upload-md-gap-y));
}
nv-fileupload.size-md > .file-list {
  gap: var(--file-upload-file-list-md-gap-y);
}