@import '~scss/variables';

.wrapper {
  position: relative;
  border-radius: 4px;
  border: 1px solid $light-color03;
  padding: 4px;
  background-color: #fff;
}

.slider {
  height: 30px;
  padding: 0;
  margin-bottom: 0;

  :global {
    .slider-handler {
      z-index: 1;
      height: 30px;
      border-radius: 0;
      border: none;
      box-shadow: none;

      &::before,
      &::after {
        position: absolute;
        content: '';
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #d8dee5;
      }
      &::before {
        width: 6px;
        height: 6px;
        border-radius: 12px;
      }
      &::after {
        width: 2px;
        height: 24px;
      }
    }

    .slider-track {
      top: 0;
    }
  }
}

.floatContent {
  display: block;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
}
