@gravity-ui/uikit/build/cjs/components/Slider/SliderTooltip/SliderTooltip.css

Gravity UI base styling and components

[dir=rtl] .g-slider-tooltip {
  transform: translate(50%, -100%);
}

.g-slider-tooltip {
  position: absolute;
  inset-block-start: -6px;
  transform: translate(-50%, -100%);
  cursor: default;
  pointer-events: none;
  user-select: none;
}
.g-slider-tooltip__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 4px 4px 2px;
  background-color: var(--g-color-base-brand);
  font-family: var(--g-text-body-font-family);
  font-weight: var(--g-text-body-font-weight);
  font-size: var(--g-text-body-1-font-size);
  line-height: var(--g-text-body-1-line-height);
  color: var(--g-color-text-brand-contrast);
}
.g-slider-tooltip__card_size_xl {
  font-family: var(--g-text-body-font-family);
  font-weight: var(--g-text-body-font-weight);
  font-size: var(--g-text-body-2-font-size);
  line-height: var(--g-text-body-2-line-height);
}
.g-slider-tooltip__pin {
  display: flex;
  position: absolute;
  inset-block-end: -5px;
  inset-inline: 0;
  justify-content: center;
  color: var(--g-color-base-brand);
}
.g-slider-tooltip_error .g-slider-tooltip__card {
  background-color: var(--g-color-base-danger-heavy);
}
.g-slider-tooltip_disabled .g-slider-tooltip__card {
  background-color: var(--g-color-base-generic-accent);
}
.g-slider-tooltip_disabled .g-slider-tooltip__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background-color: var(--g-color-base-background);
  z-index: -1;
}
.g-slider-tooltip_error .g-slider-tooltip__pin {
  color: var(--g-color-base-danger-heavy);
}
.g-slider-tooltip_disabled .g-slider-tooltip__pin {
  color: var(--g-color-base-generic-accent);
}
.g-slider-tooltip_disabled .g-slider-tooltip__pin_background {
  color: var(--g-color-base-background);
}