pdf-reader-web/components/Sliders/styled.ts

import styled, { css } from 'styled-components';
import { color } from '../../constants/style';

export const Container = styled.div`
  padding: 10px;
`;

export const Wrapper = styled.div`
  height: 10px;
  width: 100%;
  border-radius: 7px;
  background-color: ${color.black23};
  position: relative;
  cursor: pointer;
`;

export const Rail = styled("div")<{track: number}>`
  height: 10px;
  width: ${props => props.track}%;
  border-radius: 7px;
  background-color: ${color.primary};
`;

export const Track = styled("span")<{track: number; isActive: boolean}>`
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: ${color['french-blue']};
  cursor: pointer;
  top: -5px;
  position: absolute;
  transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  left: calc(${props => props.track}% - 10px);
  border: 2px solid white;
  box-sizing: border-box;

  ${props => props.isActive ? css`
    box-shadow: 0px 0px 0px 8px rgba(144, 202, 249, 0.23);
  ` : ''}

  &:hover {
    box-shadow: 0px 0px 0px 8px rgba(144, 202, 249, 0.23);
  }
`;