import styled from "styled-components";
import { greenBase, grayBase, grayLighter, SmallLabel } from "../constants";

export const SliderContainer = styled.div`
  width: 344px;
  .ant-slider-handle::after,
  .ant-slider-handle:focus::after,
  .ant-slider-handle:hover::after {
    background-color: ${greenBase};
    height: 26px;
    width: 26px;
    box-shadow: none;
    top: -8px;
  }
  .ant-slider-handle::before,
  .ant-slider-handle:focus::before {
    height: 26px;
    width: 26px;
    box-shadow: none;
  }
  .ant-slider-mark-text {
    ${SmallLabel}
    font-weight: 400;
    color: ${grayBase};
    width: 100%;
    margin-top: 4px;
  }
  .ant-slider-dot,
  .ant-slider-dot-active {
    height: 14px;
    width: 0px;
    border: 2px solid ${grayLighter};
    border-radius: 0%;
    top: -5px;
  }
  .ant-slider-dot-active:hover {
    border-color: none;
  }
`;
