@elastic/eui 70.3.0 → 71.0.0

package/dist/eui_theme_dark.css

@@ -60,6 +60,14 @@ SOFTWARE.
 /*
  * Creates the Amsterdam style of fill button
  */
+/*
+The CSS in JS version of this file lives in:
+  - src/components/form/range/range.styles.ts
+
+The following files still use the Sass version:
+  - src/themes/amsterdam/overrides/_color_stops.scss
+  - src/themes/amsterdam/overrides/_hue.scss
+*/
 @-webkit-keyframes euiAnimFadeIn {
   0% {
     opacity: 0; }
@@ -1464,7 +1472,7 @@ SOFTWARE.
   margin-top: -8px; }
 
 .euiColorStopPopover-hasFocus {
-  z-index: 1; }
+  z-index: 3; }
 
 .euiColorStopPopover__anchor {
   position: absolute;
@@ -5572,484 +5580,6 @@ SOFTWARE.
   .euiRadioGroup__item + .euiRadioGroup__item.euiRadio--compressed {
     margin-top: 0; }
 
-.euiRange__horizontalSpacer {
-  width: 16px; }
-
-.euiRange__slimHorizontalSpacer {
-  width: 8px; }
-
-.euiRangeDraggable {
-  height: 20px;
-  position: absolute;
-  top: 10px;
-  pointer-events: none;
-  z-index: 2; }
-  .euiRangeDraggable.euiRangeDraggable--compressed {
-    height: 16px;
-    top: 8px; }
-  .euiRangeDraggable.euiRangeDraggable--hasTicks {
-    top: 0; }
-  .euiRangeDraggable .euiRangeDraggle__inner {
-    position: absolute;
-    left: 16px;
-    right: 16px;
-    top: 0;
-    bottom: 0; }
-  .euiRangeDraggable:not(.euiRangeDraggable--disabled) .euiRangeDraggle__inner {
-    cursor: -webkit-grab;
-    cursor: grab;
-    pointer-events: all; }
-    .euiRangeDraggable:not(.euiRangeDraggable--disabled) .euiRangeDraggle__inner:active {
-      cursor: -webkit-grabbing;
-      cursor: grabbing; }
-
-.euiRangeHighlight {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  top: calc(50% - 3px);
-  overflow: hidden; }
-  .euiRangeHighlight__progress {
-    height: 6px;
-    border-radius: 6px;
-    background-color: #343741; }
-    .euiRangeHighlight__progress--hasFocus {
-      background-color: #36A2EF; }
-  .euiRangeHighlight--hasTicks {
-    top: 7px; }
-  .euiRangeHighlight--hasTicks.euiRangeHighlight--compressed {
-    top: 5px; }
-
-.euiRangeInput {
-  width: auto;
-  min-width: 64px; }
-  .euiRange__popover .euiRangeInput {
-    margin: 0 !important;
-    width: 100%; }
-
-.euiRangeLabel--min, .euiRangeLabel--max {
-  font-size: 12px; }
-
-.euiRangeLabel--min {
-  margin-right: 8px; }
-
-.euiRangeLabel--max {
-  margin-left: 8px; }
-
-.euiRangeLabel--isDisabled {
-  opacity: 0.25; }
-
-.euiRangeLevels {
-  display: -webkit-flex;
-  display: flex;
-  -webkit-justify-content: stretch;
-          justify-content: stretch;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 22px; }
-  .euiRangeLevels--hasTicks {
-    top: 12px; }
-  .euiRangeLevels--compressed {
-    top: 18px; }
-    .euiRangeLevels--compressed.euiRangeLevels--hasTicks {
-      top: 10px; }
-
-.euiRangeLevel {
-  display: block;
-  position: absolute;
-  height: 6px;
-  border-radius: 6px;
-  margin: 2px; }
-
-.euiRangeLevel--primary {
-  background-color: rgba(54, 162, 239, 0.3); }
-
-.euiRangeLevel--success {
-  background-color: rgba(125, 222, 216, 0.3); }
-
-.euiRangeLevel--warning {
-  background-color: rgba(243, 211, 113, 0.3); }
-
-.euiRangeLevel--danger {
-  background-color: rgba(248, 107, 99, 0.3); }
-
-/*
- *  Input Range Customization by browser
- */
-.euiRangeSlider {
-  height: 40px;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background: transparent;
-  width: 100%;
-  position: relative;
-  cursor: pointer;
-  z-index: 1; }
-  .euiRangeSlider:disabled {
-    cursor: not-allowed; }
-    .euiRangeSlider:disabled::-webkit-slider-thumb {
-      cursor: not-allowed;
-      border-color: #1D1E24;
-      background-color: #1D1E24;
-      box-shadow: none; }
-    .euiRangeSlider:disabled::-moz-range-thumb {
-      cursor: not-allowed;
-      border-color: #1D1E24;
-      background-color: #1D1E24;
-      box-shadow: none; }
-    .euiRangeSlider:disabled::-ms-thumb {
-      cursor: not-allowed;
-      border-color: #1D1E24;
-      background-color: #1D1E24;
-      box-shadow: none; }
-    .euiRangeSlider:disabled ~ .euiRangeThumb {
-      cursor: not-allowed;
-      border-color: #1D1E24;
-      background-color: #1D1E24;
-      box-shadow: none; }
-  .euiRangeSlider::-webkit-slider-thumb {
-    padding: 7px;
-    border: 1px solid #66676d;
-    background: #1D1E24 no-repeat center;
-    border-radius: 14px;
-    -webkit-transition: background-color 150ms ease-in, border-color 150ms ease-in;
-    transition: background-color 150ms ease-in, border-color 150ms ease-in;
-    box-shadow: 0 0 0 1px #1D1E24, 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2);
-    border: 2px solid #1D1E24;
-    cursor: pointer;
-    background-color: #98A2B3;
-    padding: 0;
-    height: 16px;
-    width: 16px;
-    box-sizing: border-box; }
-  .euiRangeSlider::-moz-range-thumb {
-    padding: 7px;
-    border: 1px solid #66676d;
-    background: #1D1E24 no-repeat center;
-    border-radius: 14px;
-    -moz-transition: background-color 150ms ease-in, border-color 150ms ease-in;
-    transition: background-color 150ms ease-in, border-color 150ms ease-in;
-    box-shadow: 0 0 0 1px #1D1E24, 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2);
-    border: 2px solid #1D1E24;
-    cursor: pointer;
-    background-color: #98A2B3;
-    padding: 0;
-    height: 16px;
-    width: 16px;
-    box-sizing: border-box; }
-  .euiRangeSlider::-ms-thumb {
-    padding: 7px;
-    border: 1px solid #66676d;
-    background: #1D1E24 no-repeat center;
-    border-radius: 14px;
-    -ms-transition: background-color 150ms ease-in, border-color 150ms ease-in;
-    transition: background-color 150ms ease-in, border-color 150ms ease-in;
-    box-shadow: 0 0 0 1px #1D1E24, 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2);
-    border: 2px solid #1D1E24;
-    cursor: pointer;
-    background-color: #98A2B3;
-    padding: 0;
-    height: 16px;
-    width: 16px;
-    box-sizing: border-box; }
-  .euiRangeSlider::-webkit-slider-runnable-track {
-    height: 6px;
-    width: 100%;
-    background: #343741;
-    border: 0 solid #343741;
-    border-radius: 6px; }
-  .euiRangeSlider::-moz-range-track {
-    height: 6px;
-    width: 100%;
-    background: #343741;
-    border: 0 solid #343741;
-    border-radius: 6px; }
-  .euiRangeSlider::-ms-fill-lower {
-    height: 6px;
-    width: 100%;
-    background: #343741;
-    border: 0 solid #343741;
-    border-radius: 6px; }
-  .euiRangeSlider::-ms-fill-upper {
-    height: 6px;
-    width: 100%;
-    background: #343741;
-    border: 0 solid #343741;
-    border-radius: 6px; }
-  .euiRangeSlider:focus {
-    outline: none; }
-  .euiRangeSlider:focus-visible::-webkit-slider-thumb, .euiRangeSlider--hasFocus::-webkit-slider-thumb {
-    box-shadow: 0 0 0 2px #36A2EF; }
-  .euiRangeSlider:focus-visible::-moz-range-thumb, .euiRangeSlider--hasFocus::-moz-range-thumb {
-    box-shadow: 0 0 0 2px #36A2EF; }
-  .euiRangeSlider:focus-visible::-ms-thumb, .euiRangeSlider--hasFocus::-ms-thumb {
-    box-shadow: 0 0 0 2px #36A2EF; }
-  .euiRangeSlider:focus-visible ~ .euiRangeThumb, .euiRangeSlider--hasFocus ~ .euiRangeThumb {
-    border-color: #1D1E24; }
-  .euiRangeSlider:focus-visible::-webkit-slider-runnable-track, .euiRangeSlider--hasFocus::-webkit-slider-runnable-track {
-    background-color: #36A2EF;
-    border-color: #36A2EF; }
-  .euiRangeSlider:focus-visible::-moz-range-track, .euiRangeSlider--hasFocus::-moz-range-track {
-    background-color: #36A2EF;
-    border-color: #36A2EF; }
-  .euiRangeSlider:focus-visible::-ms-fill-lower, .euiRangeSlider--hasFocus::-ms-fill-lower {
-    background-color: #36A2EF;
-    border-color: #36A2EF; }
-  .euiRangeSlider:focus-visible::-ms-fill-upper, .euiRangeSlider--hasFocus::-ms-fill-upper {
-    background-color: #36A2EF;
-    border-color: #36A2EF; }
-  .euiRangeSlider:focus-visible ~ .euiRangeHighlight .euiRangeHighlight__progress, .euiRangeSlider--hasFocus ~ .euiRangeHighlight .euiRangeHighlight__progress {
-    background-color: #36A2EF; }
-  .euiRangeSlider:focus-visible ~ .euiRangeTooltip .euiRangeTooltip__value, .euiRangeSlider--hasFocus ~ .euiRangeTooltip .euiRangeTooltip__value {
-    box-shadow: 0 0.9px 4px -1px rgba(0, 0, 0, 0.2), 0 2.6px 8px -1px rgba(0, 0, 0, 0.15), 0 5.7px 12px -1px rgba(0, 0, 0, 0.125), 0 15px 15px -1px rgba(0, 0, 0, 0.1); }
-    .euiRangeSlider:focus-visible ~ .euiRangeTooltip .euiRangeTooltip__value.euiRangeTooltip__value--right, .euiRangeSlider:focus-visible ~ .euiRangeTooltip .euiRangeTooltip__value.euiRangeTooltip__value--left, .euiRangeSlider--hasFocus ~ .euiRangeTooltip .euiRangeTooltip__value.euiRangeTooltip__value--right, .euiRangeSlider--hasFocus ~ .euiRangeTooltip .euiRangeTooltip__value.euiRangeTooltip__value--left {
-      -webkit-transform: translateX(0) translateY(-50%) scale(1.1);
-              transform: translateX(0) translateY(-50%) scale(1.1); }
-  .euiRangeSlider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    margin-top: -5px; }
-  .euiRangeSlider::-ms-thumb {
-    margin-top: 0; }
-  .euiRangeSlider::-moz-focus-outer {
-    border: none; }
-  .euiRangeSlider::-ms-track {
-    height: 6px;
-    width: 100%;
-    background: transparent;
-    border-color: transparent;
-    border-width: 8px 0;
-    color: transparent; }
-  .euiRangeSlider--hasTicks {
-    height: 20px; }
-  .euiRangeSlider--compressed {
-    height: 32px; }
-    .euiRangeSlider--compressed.euiRangeSlider--hasTicks {
-      height: 16px; }
-
-.euiRangeSlider--hasRange::-webkit-slider-runnable-track {
-  background-color: rgba(52, 55, 65, 0.4);
-  border-color: rgba(52, 55, 65, 0.4); }
-
-.euiRangeSlider--hasRange::-moz-range-track {
-  background-color: rgba(52, 55, 65, 0.4);
-  border-color: rgba(52, 55, 65, 0.4); }
-
-.euiRangeSlider--hasRange::-ms-fill-lower {
-  background-color: rgba(52, 55, 65, 0.4);
-  border-color: rgba(52, 55, 65, 0.4); }
-
-.euiRangeSlider--hasRange::-ms-fill-upper {
-  background-color: rgba(52, 55, 65, 0.4);
-  border-color: rgba(52, 55, 65, 0.4); }
-
-.euiRangeThumb {
-  padding: 7px;
-  border: 1px solid #66676d;
-  background: #1D1E24 no-repeat center;
-  border-radius: 14px;
-  transition: background-color 150ms ease-in, border-color 150ms ease-in;
-  box-shadow: 0 0 0 1px #1D1E24, 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2);
-  border: 2px solid #1D1E24;
-  cursor: pointer;
-  background-color: #98A2B3;
-  padding: 0;
-  height: 16px;
-  width: 16px;
-  box-sizing: border-box;
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  margin-top: -8px;
-  pointer-events: none;
-  z-index: 1; }
-  .euiRangeThumb:focus {
-    outline: 2px solid currentColor;
-    outline-offset: 2px;
-    border-color: #36A2EF; }
-    .euiRangeThumb:focus:focus-visible {
-      outline-style: auto; }
-    .euiRangeThumb:focus:not(:focus-visible) {
-      outline: none; }
-  .euiRangeThumb--hasTicks {
-    top: 25%; }
-
-.euiRangeTicks {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 8px;
-  display: -webkit-flex;
-  display: flex; }
-  .euiRangeTicks--isCustom {
-    left: 2px;
-    right: 2px; }
-
-.euiRangeTick {
-  overflow-x: hidden;
-  overflow-y: hidden;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  position: absolute;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  padding-top: 16px; }
-  .euiRangeTick:not(.euiRangeTick--hasTickMark)::before {
-    width: 4px;
-    height: 4px;
-    background-color: #98A2B3;
-    border-radius: 100%;
-    position: absolute;
-    top: 0;
-    content: '';
-    left: calc(50% - 2px); }
-  .euiRangeTick .euiRangeTick__pseudo {
-    width: 4px;
-    height: 4px;
-    background-color: #98A2B3;
-    border-radius: 100%;
-    position: absolute;
-    top: 0; }
-  .euiRangeTick--isCustom {
-    overflow-x: visible; }
-  .euiRangeTick--isMin, .euiRangeTick--isMax {
-    -webkit-transform: translateX(0);
-            transform: translateX(0); }
-  .euiRangeTick--isMin .euiRangeTick__pseudo {
-    left: 0; }
-  .euiRangeTick--isMax .euiRangeTick__pseudo {
-    right: 0; }
-  .euiRangeTick:enabled:hover, .euiRangeTick:focus, .euiRangeTick--selected {
-    color: #36A2EF; }
-  .euiRangeTick--selected {
-    font-weight: 500; }
-  .euiRangeTick:disabled {
-    cursor: not-allowed; }
-
-.euiRangeTicks--compressed {
-  top: 6px; }
-  .euiRangeTicks--compressed .euiRangeTick {
-    padding-top: 14px; }
-
-.euiRangeTick__label {
-  pointer-events: none; }
-
-.euiRangeTooltip {
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: calc(100% - 16px);
-  margin-left: 8px;
-  pointer-events: none;
-  z-index: 2; }
-
-.euiRangeTooltip__value {
-  font-size: 14px;
-  font-size: 1rem;
-  line-height: 1.71429rem;
-  border: 1px solid black;
-  position: absolute;
-  border-radius: 6px;
-  padding: 2px 8px;
-  background-color: black;
-  color: #FFF;
-  max-width: 256px;
-  top: 50%;
-  transition: box-shadow 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-  transition: box-shadow 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-  transition: box-shadow 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); }
-  .euiRangeTooltip__value::after, .euiRangeTooltip__value::before {
-    content: '';
-    position: absolute;
-    bottom: -6px;
-    left: 50%;
-    -webkit-transform-origin: center;
-            transform-origin: center;
-    background-color: black;
-    width: 12px;
-    height: 12px;
-    border-radius: 2px; }
-  .euiRangeTooltip__value::before {
-    background-color: black; }
-  .euiRangeTooltip__value.euiRangeTooltip__value--right {
-    margin-left: 24px; }
-    .euiRangeTooltip__value.euiRangeTooltip__value--right:before, .euiRangeTooltip__value.euiRangeTooltip__value--right:after {
-      left: -5px; }
-    .euiRangeTooltip__value.euiRangeTooltip__value--right::before {
-      margin-left: -1px; }
-  .euiRangeTooltip__value.euiRangeTooltip__value--left {
-    margin-right: 24px; }
-    .euiRangeTooltip__value.euiRangeTooltip__value--left:before, .euiRangeTooltip__value.euiRangeTooltip__value--left:after {
-      left: auto;
-      right: -5px; }
-    .euiRangeTooltip__value.euiRangeTooltip__value--left::before {
-      margin-right: -1px; }
-  .euiRangeTooltip__value.euiRangeTooltip__value--right, .euiRangeTooltip__value.euiRangeTooltip__value--left {
-    -webkit-transform: translateX(0) translateY(-50%);
-            transform: translateX(0) translateY(-50%); }
-    .euiRangeTooltip__value.euiRangeTooltip__value--right:before, .euiRangeTooltip__value.euiRangeTooltip__value--right:after, .euiRangeTooltip__value.euiRangeTooltip__value--left:before, .euiRangeTooltip__value.euiRangeTooltip__value--left:after {
-      bottom: 50%;
-      -webkit-transform: translateY(50%) rotateZ(45deg);
-              transform: translateY(50%) rotateZ(45deg); }
-  .euiRangeTooltip__value--hasTicks {
-    top: 10px; }
-    .euiRangeTooltip--compressed .euiRangeTooltip__value--hasTicks {
-      top: 8px; }
-
-.euiRangeTrack {
-  height: 100%;
-  -webkit-flex-grow: 1;
-          flex-grow: 1;
-  position: relative;
-  -webkit-align-self: flex-start;
-          align-self: flex-start; }
-  .euiRangeTrack--hasTicks {
-    margin-left: 1em;
-    margin-right: 1em; }
-  .euiRangeTrack--disabled {
-    opacity: 0.25; }
-
-/*
- * 1. There's no way to target the layout of the extra input, so we must
- *    use the descendant selector to allow the width to shrink.
- *
- * 2. Prevent the prepend/append label from extending outside the parent element
- */
-.euiRangeWrapper {
-  max-width: 400px;
-  width: 100%;
-  height: 40px;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-align-items: center;
-          align-items: center; }
-  .euiRangeWrapper--fullWidth {
-    max-width: 100%; }
-  .euiRangeWrapper--compressed {
-    height: 32px; }
-  .euiRangeWrapper--inGroup {
-    height: 100%; }
-  .euiRangeWrapper > .euiFormControlLayout {
-    /* 1 */
-    width: auto; }
-    .euiRangeWrapper > .euiFormControlLayout.euiFormControlLayout--group {
-      -webkit-flex-shrink: 0;
-              flex-shrink: 0;
-      /* 2 */ }
-
-.euiDualRange__slider::-webkit-slider-thumb {
-  visibility: hidden; }
-
-.euiDualRange__slider::-moz-range-thumb {
-  visibility: hidden; }
-
-.euiDualRange__slider::-ms-thumb {
-  visibility: hidden; }
-
 .euiSwitch {
   position: relative;
   display: -webkit-inline-flex;
@@ -9394,7 +8924,7 @@ button.euiSuggestItem {
 
 .euiColorStops__addTarget,
 .euiColorStops__addContainer {
-  z-index: 1; }
+  z-index: 3; }
 
 .euiColorStops__addTarget {
   border: 1px solid #98A2B3;
@@ -9726,241 +9256,6 @@ button.euiSuggestItem {
 .euiMarkdownEditorFooter {
   border-radius: 0 0 6px 6px; }
 
-.euiRangeTooltip__value {
-  border-radius: 4px; }
-
-.euiRangeDraggable:focus {
-  outline: none; }
-  .euiRangeDraggable:focus ~ .euiRangeThumb {
-    border: 2px solid #1D1E24;
-    box-shadow: 0 0 0 2px #36A2EF;
-    background-color: #36A2EF; }
-
-.euiRangeDraggable:focus:not(:focus-visible) ~ .euiRangeThumb {
-  box-shadow: 0 0 0 1px #1D1E24, 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2);
-  outline: none; }
-
-.euiRangeDraggable:focus-visible {
-  outline: none; }
-  .euiRangeDraggable:focus-visible ~ .euiRangeThumb {
-    border: 2px solid #1D1E24;
-    box-shadow: 0 0 0 2px #36A2EF;
-    background-color: #36A2EF; }
-
-.euiRangeHighlight {
-  z-index: 1;
-  pointer-events: none; }
-  .euiRangeHighlight__progress {
-    background-color: #98A2B3;
-    border-color: #98A2B3; }
-    .euiRangeHighlight__progress--hasFocus {
-      background-color: #36A2EF; }
-  .euiRangeHighlight--compressed {
-    top: calc(50% - 2px); }
-    .euiRangeHighlight--compressed .euiRangeHighlight__progress {
-      height: 4px; }
-    .euiRangeHighlight--compressed.euiRangeHighlight--hasTicks {
-      top: 6px; }
-  .euiRangeHighlight:not(.euiRangeHighlight--compressed).euiRangeHighlight--hasTicks {
-    top: 5px; }
-
-.euiRangeLevels .euiRangeLevel {
-  margin-top: 0;
-  margin-bottom: 0; }
-  .euiRangeLevels .euiRangeLevel:first-child {
-    margin-left: 0; }
-  .euiRangeLevels .euiRangeLevel:last-child {
-    margin-right: 0; }
-
-.euiRangeLevels--compressed .euiRangeLevel {
-  height: 4px; }
-  .euiRangeLevels--compressed .euiRangeLevel:first-child {
-    margin-left: 0; }
-  .euiRangeLevels--compressed .euiRangeLevel:last-child {
-    margin-right: 0; }
-
-.euiRangeLevels--compressed .euiRangeThumb--hasTicks {
-  top: 0; }
-
-.euiRangeSlider {
-  z-index: 2; }
-  .euiRangeSlider::-webkit-slider-runnable-track {
-    background-color: transparent; }
-  .euiRangeSlider::-moz-range-track {
-    background-color: transparent; }
-  .euiRangeSlider::-ms-fill-lower {
-    background-color: transparent; }
-  .euiRangeSlider::-ms-fill-upper {
-    background-color: transparent; }
-  .euiRangeSlider--hasTicks {
-    height: 16px; }
-  .euiRangeSlider:focus {
-    outline: none; }
-    .euiRangeSlider:focus::-webkit-slider-thumb {
-      border: 2px solid #1D1E24;
-      box-shadow: 0 0 0 2px #36A2EF;
-      background-color: #36A2EF; }
-    .euiRangeSlider:focus::-moz-range-thumb {
-      border: 2px solid #1D1E24;
-      box-shadow: 0 0 0 2px #36A2EF;
-      background-color: #36A2EF; }
-    .euiRangeSlider:focus::-ms-thumb {
-      border: 2px solid #1D1E24;
-      box-shadow: 0 0 0 2px #36A2EF;
-      background-color: #36A2EF; }
-    .euiRangeSlider:focus::-webkit-slider-runnable-track {
-      background-color: transparent; }
-    .euiRangeSlider:focus::-moz-range-track {
-      background-color: transparent; }
-    .euiRangeSlider:focus::-ms-fill-lower {
-      background-color: transparent; }
-    .euiRangeSlider:focus::-ms-fill-upper {
-      background-color: transparent; }
-    .euiRangeSlider:focus ~ .euiRangeHighlight .euiRangeHighlight__progress {
-      background-color: #36A2EF; }
-  .euiRangeSlider:focus:not(:focus-visible)::-webkit-slider-thumb {
-    box-shadow: 0 0 0 1px #1D1E24, 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2);
-    background-color: #98A2B3; }
-  .euiRangeSlider:focus:not(:focus-visible)::-moz-range-thumb {
-    box-shadow: 0 0 0 1px #1D1E24, 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2);
-    background-color: #98A2B3; }
-  .euiRangeSlider:focus:not(:focus-visible)::-ms-thumb {
-    box-shadow: 0 0 0 1px #1D1E24, 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2);
-    background-color: #98A2B3; }
-  .euiRangeSlider:focus:not(:focus-visible) ~ .euiRangeHighlight .euiRangeHighlight__progress {
-    background-color: #98A2B3; }
-  .euiRangeSlider:disabled::-webkit-slider-thumb {
-    background-color: #98A2B3; }
-  .euiRangeSlider:disabled::-moz-range-thumb {
-    background-color: #98A2B3; }
-  .euiRangeSlider:disabled::-ms-thumb {
-    background-color: #98A2B3; }
-  .euiRangeSlider:disabled ~ .euiRangeThumb {
-    background-color: #98A2B3; }
-
-.euiRangeThumb {
-  box-shadow: 0 0 0 1px #1D1E24, 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.2);
-  border: 2px solid #1D1E24;
-  background-color: #98A2B3;
-  z-index: 2;
-  pointer-events: none; }
-  .euiRangeThumb--hasTicks {
-    top: 0;
-    margin-top: 0; }
-  .euiRangeThumb:focus {
-    border: 2px solid #1D1E24;
-    box-shadow: 0 0 0 2px #36A2EF;
-    background-color: #36A2EF;
-    outline: none; }
-  .euiRangeThumb:focus:focus-visible {
-    outline: none; }
-
-.euiRangeTicks:not(.euiRangeTicks--compressed) .euiRangeTick {
-  padding-top: 0; }
-
-.euiRangeTicks:not(.euiRangeTicks--compressed) .euiRangeTick:not(.euiRangeTick--hasTickMark)::before,
-.euiRangeTicks:not(.euiRangeTicks--compressed) .euiRangeTick__pseudo {
-  width: 4px;
-  height: 6px;
-  background-color: #343741;
-  border-radius: 4px; }
-
-.euiRangeTicks--compressed .euiRangeTick {
-  padding-top: 14px; }
-  .euiRangeTicks--compressed .euiRangeTick::before,
-  .euiRangeTicks--compressed .euiRangeTick .euiRangeTick__pseudo {
-    background-color: #343741;
-    border-radius: 4px; }
-
-.euiRangeTick::before {
-  background-color: #343741;
-  border-radius: 4px; }
-
-.euiRangeTick:enabled:hover, .euiRangeTick:focus, .euiRangeTick--selected {
-  color: #36A2EF; }
-
-.euiRangeTick--selected {
-  font-weight: 500; }
-
-.euiRangeTrack::after {
-  content: '';
-  display: block;
-  background: #343741;
-  border: 0 solid #343741;
-  border-radius: 6px;
-  position: absolute;
-  left: 0; }
-
-.euiRangeTrack:not(.euiRangeTrack--compressed)::after {
-  height: 6px;
-  width: 100%; }
-
-.euiRangeTrack--compressed::after {
-  height: 6px;
-  width: 100%;
-  height: 4px; }
-
-.euiRangeTrack--compressed.euiRangeTrack--hasLevels .euiRangeTicks {
-  height: 18px;
-  top: 16px; }
-
-.euiRangeTrack--compressed.euiRangeTrack--hasLevels .euiRangeTick {
-  padding-top: 4px; }
-
-.euiRangeTrack--compressed:not(.euiRangeTrack--hasLevels) .euiRangeTicks {
-  height: 20px;
-  top: 12px; }
-
-.euiRangeTrack--compressed:not(.euiRangeTrack--hasLevels) .euiRangeTick {
-  padding-top: 6px; }
-
-.euiRangeTrack--compressed.euiRangeTrack--hasTicks::after {
-  top: 6px; }
-
-.euiRangeTrack--compressed:not(.euiRangeTrack--hasTicks)::after {
-  top: calc(50% - 2px); }
-
-.euiRangeTrack--compressed .euiRangeThumb--hasTicks {
-  top: 0; }
-
-.euiRangeTrack--compressed .euiRangeLevels:not(.euiRangeLevels--hasTicks) {
-  top: 19px; }
-
-.euiRangeTrack--compressed .euiRangeLevels--hasTicks {
-  top: 11px; }
-
-.euiRangeTrack:not(.euiRangeTrack--compressed).euiRangeTrack--hasLevels .euiRangeTicks {
-  height: 20px;
-  top: 20px; }
-
-.euiRangeTrack:not(.euiRangeTrack--compressed).euiRangeTrack--hasLevels .euiRangeTick {
-  padding-top: 6px; }
-
-.euiRangeTrack:not(.euiRangeTrack--compressed):not(.euiRangeTrack--hasLevels) .euiRangeTicks {
-  height: 24px;
-  top: 16px; }
-
-.euiRangeTrack:not(.euiRangeTrack--compressed):not(.euiRangeTrack--hasLevels) .euiRangeTick {
-  padding-top: 11px; }
-
-.euiRangeTrack:not(.euiRangeTrack--compressed).euiRangeTrack--hasTicks .euiRangeTooltip {
-  top: -2px; }
-
-.euiRangeTrack:not(.euiRangeTrack--compressed).euiRangeTrack--hasTicks::after {
-  top: 5px; }
-
-.euiRangeTrack:not(.euiRangeTrack--compressed):not(.euiRangeTrack--hasTicks)::after {
-  top: calc(50% - 3px); }
-
-.euiRangeTrack:not(.euiRangeTrack--compressed) .euiRangeLevels:not(.euiRangeLevels--hasTicks) {
-  top: 24px; }
-
-.euiRangeTrack:not(.euiRangeTrack--compressed) .euiRangeLevels--hasTicks {
-  top: 12px; }
-
-.euiRangeTooltip {
-  z-index: 3; }
-
 .euiSideNavItem--root {
   padding-bottom: 8px; }
   .euiSideNavItem--root + .euiSideNavItem--root {