import styled from "styled-components";
export const RangeSlider = styled.div `
  width: 596px;
  height: 61px;
  position: relative;
  width: 100%;
  max-width: 596px;
  & + & {
    margin-top: 20px;
  }
  .slider-bg {
    background: #ccdae9;
    border-radius: 2px;
    width: 100%;
    height: 6px;
    top: 18px;
    position: absolute;
    left: 0;
  }
  .current-line {
    border-radius: 2px;
    background: #3897f9;
    width: 40%;
    height: 6px;
    top: 18px;
    position: absolute;
    left: 0;
    &::before,
    &::after {
      position: absolute;
      right: 0;
      content: " ";
    }
    &:before {
      background-image: url("data:image/svg+xml,%3Csvg width='14' height='22' viewBox='0 0 14 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 21C14 21.5523 13.5523 22 13 22L0.999998 22C0.447714 22 -1.86821e-06 21.5523 -1.81993e-06 21L-6.60175e-07 7.73399C-6.37692e-07 7.47682 0.0990747 7.22954 0.276643 7.04352L6.27665 0.757802C6.67059 0.345104 7.32942 0.345104 7.72336 0.757802L13.7234 7.04352C13.9009 7.22954 14 7.47682 14 7.73399L14 21Z' fill='%233897F9'/%3E%3Cline x1='5.5' y1='10' x2='5.5' y2='17' stroke='white'/%3E%3Cline x1='8.5' y1='10' x2='8.5' y2='17' stroke='white'/%3E%3C/svg%3E%0A");
      width: 14px;
      height: 22px;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      bottom: 0;
      transform: translate(50%, 100%);
      cursor: pointer;
    }
    &:after {
      font-family: "Geometria", "Verdana", sans-serif;
      font-weight: 500;
      font-size: 12px;
      line-height: 18px;
      display: flex;
      align-items: center;
      text-align: center;
      letter-spacing: -0.02em;
      color: #233445;
      content: "40%";
      top: 0;
      transform: translate(50%, -100%);
    }
  }
  &::before,
  &:after {
    position: absolute;
    left: 0;
    top: 0;
    content: "0";
    font-family: "Geometria", "Verdana", sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: -0.02em;
    color: #919ca7;
  }
  &::after {
    left: auto;
    right: 0;
    content: "100%";
  }
`;
//# sourceMappingURL=range.js.map