import styled, { css } from 'styled-components';

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

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

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

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