import { FlexContainer, Typography } from "@/components/shared/components"
import styled, { css } from "styled-components"

export const SliderContainer = styled.div`
  position: relative;
  width: 100%;
  padding: 1rem 0;
`

export const SliderTrack = styled.div<{ value: number }>`
  ${({ theme, value }) => css`
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    background: ${theme.colors.gray600};
    border-radius: 2px;

    &::before {
      content: "";
      position: absolute;
      height: 100%;
      left: 0;
      width: ${`${value}%`};
      background: ${theme.colors.gray100};
      border-radius: 2px;
    }s
  `}
`

export const StyledSlider = styled.input.attrs({
  type: "range",
  min: 0,
  max: 100,
  step: 0.1,
})`
  ${({ theme }) => css`
    position: relative;
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    background: transparent;
    z-index: 2;

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 6.81px !important;
      height: 16px;
      background: ${theme.colors.white};
      cursor: pointer;
      transition: background 0.2s;
      z-index: 4;
      border-radius: 200px;
      border: 2.311px solid var(--Grayscale-Dark-Theme-Dark-700, #292930);
      background: var(--Grayscale-White, #fff);
      box-shadow:
        0px 0px 0px 1.156px #fff,
        -1.156px 1.156px 4.622px 2.311px rgba(0, 0, 0, 0.8);
    }
  `}
`

export const SliderMarkerContainer = styled(FlexContainer)`
  position: relative;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 0.5rem;
`

export const MarkerText = styled(Typography)`
  position: absolute;
  transform: translateX(-50%);
  top: -20px;
`
export const MarkerPointer = styled(FlexContainer)`
  position: absolute;
  transform: translateX(-50%);
  top: 16px;
  width: 5px;
  height: 10px;
  transition: none;
  border-radius: 13.86px;
  z-index: 1;
`