:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

.form-control .form-control__label {
  display: none;
}
.form-control .form-control__help-text {
  display: none;
}

.form-control--has-label .form-control__label {
  display: inline-block;
  color: var(--sl-input-label-color);
  margin-bottom: var(--sl-spacing-xx-small);
}
.form-control--has-label.form-control--small .form-control__label {
  font-size: var(--sl-input-label-font-size-small);
}
.form-control--has-label.form-control--medium .form-control__label {
  font-size: var(--sl-input-label-font-size-medium);
}
.form-control--has-label.form-control--large .form-control_label {
  font-size: var(--sl-input-label-font-size-large);
}

.form-control--has-help-text .form-control__help-text {
  display: block;
  color: var(--sl-input-help-text-color);
}
.form-control--has-help-text .form-control__help-text ::slotted(*) {
  margin-top: var(--sl-spacing-xxx-small);
}
.form-control--has-help-text.form-control--small .form-control__help-text {
  font-size: var(--sl-input-help-text-font-size-small);
}
.form-control--has-help-text.form-control--medium .form-control__help-text {
  font-size: var(--sl-input-help-text-font-size-medium);
}
.form-control--has-help-text.form-control--large .form-control__help-text {
  font-size: var(--sl-input-help-text-font-size-large);
}

.form-control--has-error-text .form-control__help-text {
  display: none;
}
.form-control--has-error-text .form-control__input > .input[part=base],
.form-control--has-error-text .form-control__input > .select *[part=select-box] {
  border-color: var(--sl-input-error-text-color);
}
.form-control--has-error-text .form-control__error-text {
  display: block;
  color: var(--sl-input-error-text-color);
}
.form-control--has-error-text .form-control__error-text ::slotted(*) {
  margin-top: var(--sl-spacing-xxx-small);
}
.form-control--has-error-text.form-control--small .form-control__error-text {
  font-size: var(--sl-input-error-text-font-size-small);
}
.form-control--has-error-text.form-control--medium .form-control__error-text {
  font-size: var(--sl-input-error-text-font-size-medium);
}
.form-control--has-error-text.form-control--large .form-control__error-text {
  font-size: var(--sl-input-error-text-font-size-large);
}

:host {
  --thumb-size: 20px;
  --tooltip-offset-y: 10px;
  --track-color: var(--sl-color-gray-200);
  --track-height: 6px;
  display: block;
}

.range {
  position: relative;
}
.range .range__control {
  -webkit-appearance: none;
  width: 100%;
  height: var(--sl-input-height-medium);
  background: transparent;
  line-height: var(--sl-input-height-medium);
  vertical-align: middle;
}
.range .range__control::-webkit-slider-runnable-track {
  width: 100%;
  height: var(--track-height);
  background-color: var(--track-color);
  border-radius: 3px;
  border: none;
}
.range .range__control::-webkit-slider-thumb {
  border: none;
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background-color: var(--sl-color-blue-500);
  border: solid var(--sl-input-border-width) var(--sl-color-blue-500);
  -webkit-appearance: none;
  margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);
  transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color, var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) transform;
  cursor: pointer;
}
.range .range__control:not(:disabled)::-webkit-slider-thumb:hover {
  background-color: var(--sl-color-blue-400);
  border-color: var(--sl-color-blue-400);
}
.range .range__control:not(:disabled):focus::-webkit-slider-thumb {
  background-color: var(--sl-color-blue-400);
  border-color: var(--sl-color-blue-400);
  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
.range .range__control:not(:disabled)::-webkit-slider-thumb:active {
  background-color: var(--sl-color-blue-500);
  border-color: var(--sl-color-blue-500);
  cursor: grabbing;
}
.range .range__control::-moz-focus-outer {
  border: 0;
}
.range .range__control::-moz-range-track {
  width: 100%;
  height: var(--track-height);
  background-color: var(--track-color);
  border-radius: 3px;
  border: none;
}
.range .range__control::-moz-range-thumb {
  border: none;
  height: var(--thumb-size);
  width: var(--thumb-size);
  border-radius: 50%;
  background-color: var(--sl-color-blue-500);
  border-color: var(--sl-color-blue-500);
  transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color, var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) transform;
  cursor: pointer;
}
.range .range__control:not(:disabled)::-moz-range-thumb:hover {
  background-color: var(--sl-color-blue-400);
  border-color: var(--sl-color-blue-400);
}
.range .range__control:not(:disabled):focus::-moz-range-thumb {
  background-color: var(--sl-color-blue-400);
  border-color: var(--sl-color-blue-400);
  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}
.range .range__control:not(:disabled)::-moz-range-thumb:active {
  background-color: var(--sl-color-blue-600);
  border-color: var(--sl-color-blue-600);
  cursor: grabbing;
}
.range .range__control:focus {
  outline: none;
}
.range .range__control:disabled {
  opacity: 0.5;
}
.range .range__control:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}
.range .range__control:disabled::-moz-range-thumb {
  cursor: not-allowed;
}

.range__tooltip {
  position: absolute;
  z-index: var(--sl-z-index-tooltip);
  left: 1px;
  border-radius: var(--sl-tooltip-border-radius);
  background-color: var(--sl-tooltip-background-color);
  font-family: var(--sl-tooltip-font-family);
  font-size: var(--sl-tooltip-font-size);
  font-weight: var(--sl-tooltip-font-weight);
  line-height: var(--sl-tooltip-line-height);
  color: var(--sl-tooltip-color);
  opacity: 0;
  padding: var(--sl-tooltip-padding);
  transition: var(--sl-transition-fast) opacity;
  pointer-events: none;
}
.range__tooltip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  margin-left: calc(-1 * var(--sl-tooltip-arrow-size));
}

.range--tooltip-visible .range__tooltip {
  opacity: 1;
}

.range--tooltip-top .range__tooltip {
  top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));
}
.range--tooltip-top .range__tooltip::after {
  border-top: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
  border-left: var(--sl-tooltip-arrow-size) solid transparent;
  border-right: var(--sl-tooltip-arrow-size) solid transparent;
  top: 100%;
}

.range--tooltip-bottom .range__tooltip {
  bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));
}
.range--tooltip-bottom .range__tooltip::after {
  border-bottom: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
  border-left: var(--sl-tooltip-arrow-size) solid transparent;
  border-right: var(--sl-tooltip-arrow-size) solid transparent;
  bottom: 100%;
}