.slider-target,
.slider-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  box-sizing: border-box;
  touch-action: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.slider-target {
  position: relative;
}
.slider-base,
.slider-connects {
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}
.slider-connects {
  overflow: hidden;
  z-index: 0;
}
.slider-connect,
.slider-origin {
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-style: flat;
  width: 100%;
  will-change: transform;
  z-index: 1;
}
.slider-txt-dir-rtl.slider-horizontal .slider-origin {
  left: 0;
  right: auto;
}
.slider-vertical .slider-origin {
  top: -100%;
  width: 0;
}
.slider-horizontal .slider-origin {
  height: 0;
}
.slider-handle {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}
.slider-touch-area {
  height: 100%;
  width: 100%;
}
.slider-state-tap .slider-connect,
.slider-state-tap .slider-origin {
  transition: transform 0.3s;
}
.slider-state-drag * {
  cursor: inherit !important;
}
.slider-tooltip-drag .slider-tooltip,
.slider-tooltip-focus .slider-tooltip {
  display: none !important;
}
.slider-tooltip-drag .slider-active .slider-tooltip,
.slider-tooltip-drag.slider-state-drag
  .slider-tooltip:not(.slider-tooltip-hidden),
.slider-tooltip-focus.slider-focused
  .slider-tooltip:not(.slider-tooltip-hidden) {
  display: block !important;
}
.slider-horizontal {
  height: var(--slider-height, 6px);
}
.slider-horizontal .slider-handle {
  height: var(--slider-handle-height, 16px);
  right: calc(var(--slider-handle-width, 16px) / 2 * -1);
  top: calc(
    var(--slider-handle-height, 16px) / 2 * -1 - var(--slider-height, 6px) / 2 *
      -1 + -1px
  );
  width: var(--slider-handle-width, 16px);
}
.slider-vertical {
  height: var(--slider-vertical-height, 300px);
  width: var(--slider-height, 6px);
}
.slider-vertical .slider-handle {
  bottom: calc(var(--slider-handle-width, 16px) / 2 * -1);
  height: var(--slider-handle-width, 16px);
  right: calc(
    var(--slider-handle-height, 16px) / 2 * -1 - var(--slider-height, 6px) / 2 *
      -1 + -1px
  );
  width: var(--slider-handle-height, 16px);
}
.slider-txt-dir-rtl.slider-horizontal .slider-handle {
  left: calc(var(--slider-handle-width, 16px) / 2 * -1);
  right: auto;
}
.slider-base {
  background-color: var(--slider-bg, #d1d5db);
}
.slider-base,
.slider-connects {
  border-radius: var(--slider-radius, 9999px);
}
.slider-connect {
  background: var(--slider-connect-bg, var(--color-primary-500));
  cursor: pointer;
}
.slider-draggable {
  cursor: ew-resize;
}
.slider-vertical .slider-draggable {
  cursor: ns-resize;
}
.slider-handle {
  background: var(--slider-handle-bg, #fff);
  border: var(--slider-handle-border, 0);
  border-radius: var(--slider-handle-radius, 9999px);
  box-shadow: var(
    --slider-handle-shadow,
    0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32)
  );
  cursor: -webkit-grab;
  cursor: grab;
  height: var(--slider-handle-height, 16px);
  width: var(--slider-handle-width, 16px);
}
.slider-handle:focus {
  box-shadow:
    0 0 0 var(--slider-handle-ring-width, 2px)
      var(--slider-handle-ring-color, var(--color-primary-500)),
    var(--slider-handle-shadow, 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32));
  outline: none;
}
.slider-active {
  box-shadow: var(
    --slider-handle-shadow-active,
    0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.42)
  );
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
[disabled] .slider-connect {
  background: var(--slider-connect-bg-disabled, #9ca3af);
}
[disabled].slider-handle,
[disabled] .slider-handle,
[disabled].slider-target {
  cursor: not-allowed;
}
[disabled] .slider-tooltip {
  background: var(--slider-tooltip-bg-disabled, #9ca3af);
  border-color: var(--slider-tooltip-bg-disabled, #9ca3af);
}
.slider-tooltip {
  background: var(--slider-tooltip-bg, var(--color-primary-500));
  border: 1px solid var(--slider-tooltip-bg, var(--color-primary-500));
  border-radius: var(--slider-tooltip-radius, 5px);
  color: var(--slider-tooltip-color, #fff);
  display: block;
  font-size: var(--slider-tooltip-font-size, 0.875rem);
  font-weight: var(--slider-tooltip-font-weight, 600);
  line-height: var(--slider-tooltip-line-height, 1.25rem);
  min-width: var(--slider-tooltip-min-width, 20px);
  padding: var(--slider-tooltip-py, 2px) var(--slider-tooltip-px, 6px);
  position: absolute;
  text-align: center;
  white-space: nowrap;
}
.slider-horizontal .slider-tooltip-top {
  bottom: calc(
    var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) +
      var(--slider-tooltip-distance, 3px)
  );
  left: 50%;
  transform: translate(-50%);
}
.slider-horizontal .slider-tooltip-top:before {
  border: var(--slider-tooltip-arrow-size, 5px) solid transparent;
  border-top-color: inherit;
  bottom: calc(var(--slider-tooltip-arrow-size, 5px) * -1.7);
  content: '';
  height: 0;
  left: 50%;
  position: absolute;
  transform: translate(-50%);
  width: 0;
}
.slider-horizontal .slider-tooltip-bottom {
  left: 50%;
  top: calc(
    var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) +
      var(--slider-tooltip-distance, 3px)
  );
  transform: translate(-50%);
}
.slider-horizontal .slider-tooltip-bottom:before {
  border: var(--slider-tooltip-arrow-size, 5px) solid transparent;
  border-bottom-color: inherit;
  content: '';
  height: 0;
  left: 50%;
  position: absolute;
  top: calc(var(--slider-tooltip-arrow-size, 5px) * -2);
  transform: translate(-50%);
  width: 0;
}
.slider-vertical .slider-tooltip-left {
  right: calc(
    var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) +
      var(--slider-tooltip-distance, 3px)
  );
  top: 50%;
  transform: translateY(-50%);
}
.slider-vertical .slider-tooltip-left:before {
  border: var(--slider-tooltip-arrow-size, 5px) solid transparent;
  border-left-color: inherit;
  content: '';
  height: 0;
  position: absolute;
  right: calc(var(--slider-tooltip-arrow-size, 5px) * -2);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
}
.slider-vertical .slider-tooltip-right {
  left: calc(
    var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) +
      var(--slider-tooltip-distance, 3px)
  );
  top: 50%;
  transform: translateY(-50%);
}
.slider-vertical .slider-tooltip-right:before {
  border: var(--slider-tooltip-arrow-size, 5px) solid transparent;
  border-right-color: inherit;
  content: '';
  height: 0;
  left: calc(var(--slider-tooltip-arrow-size, 5px) * -2);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
}
.slider-horizontal .slider-origin > .slider-tooltip {
  left: auto;
  transform: translate(50%);
}
.slider-horizontal .slider-origin > .slider-tooltip-top {
  bottom: calc(
    var(--slider-tooltip-arrow-size, 5px) + var(--slider-handle-height, 16px) /
      2 - var(--slider-height, 6px) / 2 + var(--slider-tooltip-distance, 3px) +
      1px
  );
}
.slider-horizontal .slider-origin > .slider-tooltip-bottom {
  top: calc(
    var(--slider-tooltip-arrow-size, 5px) + var(--slider-handle-height, 16px) /
      2 - var(--slider-height, 6px) / 2 + var(--slider-tooltip-distance, 3px) +
      var(--slider-height, 6px) - 1px
  );
}
.slider-vertical .slider-origin > .slider-tooltip {
  top: auto;
  transform: translateY(
    calc(
      var(--slider-tooltip-line-height, 1.25rem) * -1 -
        var(--slider-tooltip-py, 2px) * -1 + 1px
    )
  );
}
.slider-vertical .slider-origin > .slider-tooltip-left {
  right: calc(
    var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) +
      var(--slider-handle-height, 16px) / 2 - var(--slider-height, 6px) / 2 +
      var(--slider-tooltip-distance, 3px) - 1px
  );
}
.slider-vertical .slider-origin > .slider-tooltip-right {
  left: calc(
    var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) +
      var(--slider-handle-height, 16px) / 2 - var(--slider-height, 6px) / 2 +
      var(--slider-tooltip-distance, 3px) - var(--slider-height, 6px) + 1px
  );
}

.slider-tooltip {
  display: flex !important;
}

.straight-tooltip .slider-tooltip {
  border-radius: 0;
  min-width: 28px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  height: 28px;
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 3;
}

.rounded-tooltip .slider-tooltip {
  border-radius: 0.5rem;
  min-width: 28px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  height: 28px;
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 3;
}

.curved-tooltip .slider-tooltip {
  border-radius: 0.75rem;
  min-width: 28px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  height: 28px;
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 3;
}

.circle-tooltip .slider-tooltip {
  border-radius: 100rem;
  width: 32px;
  height: 32px;
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 3;
}

.slider-primary .slider-connect,
.slider-primary .slider-tooltip {
  @apply bg-primary-500 border-primary-500;
}

.slider-primary .slider-handle:focus {
  box-shadow:
    0 0 0 var(--slider-handle-ring-width, 2px)
      var(--slider-handle-ring-color, #6366f1),
    var(--slider-handle-shadow, 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32));
  outline: none;
}

.slider-info .slider-connect,
.slider-info .slider-tooltip {
  background: var(--color-info-500);
  border-color: var(--color-info-500);
}

.slider-info .slider-handle:focus {
  box-shadow:
    0 0 0 var(--slider-handle-ring-width, 2px)
      var(--slider-handle-ring-color, var(--color-info-500)),
    var(--slider-handle-shadow, 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32));
  outline: none;
}

.slider-success .slider-connect,
.slider-success .slider-tooltip {
  background: var(--color-success-500);
  border-color: var(--color-success-500);
}

.slider-success .slider-handle:focus {
  box-shadow:
    0 0 0 var(--slider-handle-ring-width, 2px)
      var(--slider-handle-ring-color, var(--color-success-500)),
    var(--slider-handle-shadow, 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32));
  outline: none;
}

.slider-warning .slider-connect,
.slider-warning .slider-tooltip {
  background: var(--color-warning-500);
  border-color: var(--color-warning-500);
}

.slider-warning .slider-handle:focus {
  box-shadow:
    0 0 0 var(--slider-handle-ring-width, 2px)
      var(--slider-handle-ring-color, var(--color-warning-500)),
    var(--slider-handle-shadow, 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32));
  outline: none;
}

.slider-danger .slider-connect,
.slider-danger .slider-tooltip {
  background: var(--color-danger-500);
  border-color: var(--color-danger-500);
}

.slider-danger .slider-handle:focus {
  box-shadow:
    0 0 0 var(--slider-handle-ring-width, 2px)
      var(--slider-handle-ring-color, var(--color-danger-500)),
    var(--slider-handle-shadow, 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32));
  outline: none;
}

.dark .slider-base {
  background: #475569;
}