.rux-help-text {
  margin-top: 0.625rem;
  color: var(--color-text-primary);
  font-size: var(--font-body-2-font-size);
  font-family: var(--font-body-2-font-family);
  font-weight: var(--font-body-2-font-weight);
  letter-spacing: var(--font-body-2-letter-spacing);
}

.rux-error-text {
  padding-left: 1.625rem;
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FF3030%22%20fill-rule%3D%22evenodd%22%20d%3D%22M64.031%205c8.461%200%2068.88%20107.243%2063.648%20114.184-5.232%206.942-120.805%205.477-127.212%200C-5.941%20113.708%2055.57%205%2064.03%205zm3.45%2075.894l1.822-34.893H56.946l1.82%2034.893h8.715zM56.803%2093.108c0%201.929.547%203.423%201.643%204.483%201.095%201.06%202.642%201.589%204.642%201.589%201.953%200%203.477-.542%204.572-1.625%201.095-1.084%201.643-2.566%201.643-4.447%200-1.952-.542-3.452-1.625-4.5-1.084-1.047-2.613-1.571-4.59-1.571-2.047%200-3.607.512-4.678%201.536-1.072%201.023-1.607%202.535-1.607%204.535z%22%2F%3E%0A%3C%2Fsvg%3E);
  background-repeat: no-repeat;
  background-size: 1rem;
  background-position: center left 0rem;
  text-align: left;
  width: fit-content;
  -webkit-order: 3;
  order: 3;
  margin-top: 0.625rem;
  color: var(--status-symbol-color-fill-critical);
  font-size: var(--font-body-2-bold-font-size);
  font-family: var(--font-body-2-bold-font-family);
  font-weight: var(--font-body-2-bold-font-weight);
  letter-spacing: var(--font-body-2-bold-letter-spacing);
}

:host {
  /** @prop --slider-thumb-background-color: [DEPRECATED] Background color of the slider's thumb. */
  --slider-thumb-background-color: var(--color-background-base-default);
  /** @prop --slider-thumb-border-color: [DEPRECATED] Border color of the slider's thumb. */
  --slider-thumb-border-color: var(--color-background-interactive-default);
  /** @prop --slider-hover-thumb-background-color: [DEPRECATED] Background color of the slider's thumb in a hover state. */
  --slider-hover-thumb-background-color: var(--color-background-base-default);
  /** @prop --slider-hover-thumb-border-color: [DEPRECATED] Border color of the slider's thumb in a hover state. */
  --slider-hover-thumb-border-color: var(
      --color-background-interactive-hover
  );
  /** @prop --slider-track-background-color: [DEPRECATED] Background color of the slider's track. */
  --slider-track-background-color: var(
      --color-background-interactive-default
  );
  /** @prop --slider-selected-track-background-color: [DEPRECATED] Background color of the slider's thumb in a selected state. */
  --slider-selected-track-background-color: var(
      --color-background-interactive-default
  );
  /** @prop --slider-selected-thumb-border-color: [DEPRECATED] Border color of the slider's thumb in a selected state. */
  --slider-selected-thumb-border-color: var(
      --color-background-interactive-hover
  );
  /** @prop --slider-thumb-size: [DEPRECATED] Size of the slider's thumb, both width and height. */
  --slider-thumb-size: 19px;
  /** @prop --slider-thumb-border-size: [DEPRECATED] Size of slider's thumb border. */
  --slider-thumb-border-size: 2px;
  /** @prop --slider-value-percent: [DEPRECATED] The current value of the slider in a percent. */
  --slider-value-percent: 50%;
  /** @prop --slider-top: [DEPRECATED] Determines the top value of the slider thumb. */
  --slider-top: calc(var(--slider-thumb-size) / -2.7);
  /** @prop --slider-track-height: [DEPRECATED] the slider track height */
  --slider-track-height: 1px;
  /** @prop --slider-track-before-thumb-height: [DEPRECATED] the slider track before thumb height */
  --slider-track-before-thumb-height: 5px;
  --slider-tick-padding-top: 0px;
  display: flex;
  flex-grow: 1;
  flex-flow: column;
}

.hidden,
:host([hidden]) {
  display: none;
}

.rux-form-field {
  display: flex;
  flex-direction: column;
}
.rux-form-field label {
  margin-bottom: var(--spacing-input-label-top);
}

.with-axis-labels {
  padding-bottom: 2rem;
}

.rux-slider {
  height: 1.25rem;
}
.rux-slider :hover {
  cursor: pointer;
}
.rux-slider :disabled {
  cursor: not-allowed;
}
.rux-slider .rux-range:disabled + #steplist {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}
.rux-slider .rux-range:disabled + #steplist .tick {
  cursor: not-allowed;
}
.rux-slider .rux-range:disabled + #steplist .tick-label .axis-label {
  cursor: not-allowed;
}
.rux-slider #steplist {
  display: grid;
  padding: var(--slider-tick-padding-top) 0.594rem;
  cursor: default;
}
.rux-slider #steplist .tick-label {
  grid-row: 1;
  width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rux-slider #steplist .tick-label .axis-label {
  padding-top: 0.25rem;
  cursor: default;
}
.rux-slider #steplist .tick {
  background: var(--color-background-interactive-default);
  height: 0.25rem;
  width: 0.25rem;
  border-radius: 2px;
  cursor: default;
}
.rux-slider #steplist .tick-label:not(:first-child):not(:last-child) {
  padding: 0;
}
.rux-slider #steplist :disabled {
  opacity: var(--disabled-opacity);
}

.rux-range {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background: none;
  width: 100%;
  margin: 0;
  color: transparent;
}

input[type=range]:focus {
  outline: none;
}

/****** Track ******/
/* Track -> WebKit */
.rux-range::-webkit-slider-runnable-track {
  display: flex;
  align-items: center;
  max-width: 100%;
  /* width: 100%; */
  cursor: pointer;
  border-radius: 2.5px;
  min-height: var(--slider-track-height);
  max-height: var(--slider-track-before-thumb-height);
  background-image: linear-gradient(var(--slider-track-background-color), var(--slider-track-background-color)), linear-gradient(var(--slider-track-background-color), var(--slider-track-background-color));
  background-size: var(--slider-value-percent) var(--slider-track-before-thumb-height), 100% var(--slider-track-height);
  background-repeat: no-repeat no-repeat;
  background-position: left, right;
}

.rux-range:disabled::-webkit-slider-runnable-track {
  opacity: var(--disabled-opacity, 0.4);
  cursor: not-allowed;
}

/* Track -> Moz */
.rux-range::-moz-range-track {
  display: flex;
  align-items: center;
  max-width: 100%;
  /* width: 100%; */
  cursor: pointer;
  border-radius: 2.5px;
  min-height: var(--slider-track-height);
  max-height: var(--slider-track-before-thumb-height);
  background-image: linear-gradient(var(--slider-track-background-color), var(--slider-track-background-color)), linear-gradient(var(--slider-track-background-color), var(--slider-track-background-color));
  background-size: calc(1 * var(--slider-value-percent)) var(--slider-track-before-thumb-height), 100% var(--slider-track-height);
  background-repeat: no-repeat no-repeat;
  background-position: left, right;
}

.rux-range:disabled::-moz-range-track,
.rux-range:disabled::-moz-range-progress {
  opacity: var(--disabled-opacity, 0.4);
  cursor: not-allowed;
}

.rux-range::-moz-range-progress {
  background-color: var(--slider-selected-track-background-color);
}

.rux-input:disabled {
  opacity: var(--disabled-opacity, 0.4);
  cursor: not-allowed;
}

/* Track -> Ms */
.rux-range::-ms-track {
  display: flex;
  align-items: center;
  max-width: 100%;
  /* width: 100%; */
  cursor: pointer;
  border-radius: 2.5px;
  min-height: var(--slider-track-height);
  max-height: 5px;
  background-image: linear-gradient(var(--slider-track-background-color), var(--slider-track-background-color)), linear-gradient(var(--slider-track-background-color), var(--slider-track-background-color));
  background-size: var(--slider-value-percent) var(--slider-track-before-thumb-height), 100% var(--slider-track-height);
  background-repeat: no-repeat no-repeat;
  background-position: left, right;
}

.rux-range::-ms-fill-lower {
  height: 2px;
  background-color: #4dacff;
}

.rux-range::-ms-fill-upper {
  height: 2px;
  background-color: var(--slider-track-background-color);
}

/*****  Thumb ******/
/* Thumb -> Webkit */
.rux-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  position: relative;
  top: var(--slider-top);
  height: var(--slider-thumb-size);
  width: var(--slider-thumb-size);
  border-radius: 100%;
  border: var(--slider-thumb-border-size) solid var(--slider-thumb-border-color);
  background-color: var(--slider-thumb-background-color);
  cursor: pointer;
  z-index: 6;
}

.rux-range::-webkit-slider-thumb:hover {
  border-color: var(--slider-hover-thumb-border-color);
  background-color: var(--slider-hover-thumb-background-color);
}

.rux-range:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}

.rux-range:disabled::-webkit-slider-thumb:hover {
  border-color: var(--slider-thumb-border-color);
}

.rux-range:not(:disabled)::-webkit-slider-thumb:active {
  border-color: var(--slider-selected-thumb-border-color);
  background-color: var(--color-background-base-default);
}

.rux-range:not(:disabled)::-webkit-slider-thumb:focus,
.rux-range:not(:disabled)::-webkit-slider-thumb:hover:not(:active) {
  background-color: var(--slider-hover-thumb-background-color);
}

/* Thumb -> Moz */
.rux-range::-moz-range-thumb {
  -moz-appearance: none;
  position: relative;
  top: var(--slider-top);
  height: calc(var(--slider-thumb-size) - 4px);
  width: calc(var(--slider-thumb-size) - 4px);
  border-radius: 100%;
  border: var(--slider-thumb-border-size) solid var(--slider-thumb-border-color);
  background-color: var(--slider-thumb-background-color);
  cursor: pointer;
}

.rux-range:not(:disabled)::-moz-range-thumb:active {
  border-color: var(--slider-selected-thumb-border-color);
  background-color: var(--color-background-base-default);
}

.rux-range::-moz-range-thumb:hover {
  border-color: var(--slider-hover-thumb-border-color);
}

input:-moz-focusring {
  outline: none;
}

.rux-range:disabled::-moz-range-thumb {
  opacity: var(--disabled-opacity, 0.4);
  cursor: not-allowed;
}

/* Thumb -> Ms */
.rux-range::-ms-thumb {
  position: relative;
  top: var(--slider-top);
  height: var(--slider-thumb-size);
  width: var(--slider-thumb-size);
  border-radius: 100%;
  border: var(--slider-thumb-border-size) solid var(--slider-thumb-border-color);
  background-color: var(--slider-thumb-background-color);
  cursor: pointer;
  z-index: 6;
}

.rux-range:disabled::-ms-thumb {
  opacity: 0.4;
  cursor: not-allowed;
}