@import '~tc-ui/src/styles/tc-includes';

:global {
  .SliderStandard {
    .rc-slider-dot {
      left: 0%;
      background: #ffffff;
      border: 4px solid #d5d5d5;
      border-radius: 18px;
      width: 20px;
      height: 20px;
      bottom: -7px;
    }

    .rc-slider-track {
      background-color: transparent;
    }

    .rc-slider-handle {
      background: $tc-dark-blue;
      border: none;
      width: 20px;
      height: 20px;
      margin-top: -9px;
      margin-left: -4px;
    }

    .rc-slider-mark {
      left: 2px;
      top: -30px;
      width: calc(100% + 4px);

      .rc-slider-mark-text,
      .rc-slider-mark-text.rc-slider-mark-text-active {
        @include tc-label-lg;
        line-height: 5 * $base_unit;
        color: $tc-gray-80;
        letter-spacing: 0;
      }
      .rc-slider-mark-text {
        white-space: nowrap;
        font-weight: 400;
        font-size: 15px;
      }
    }
  }
}