import styled from 'styled-components'
import theme from 'theme'
import resizeIcon from './assets/resize-horiz.svg'

export const SliderWrapper = styled.div`
  background-color: ${theme.colors['transparent-white']};
  margin-top: 20px;
  width: 100%;
`
export const Label = styled.label`
  color: ${theme.textStyles.assetDetail.color};
  display: inline-block;
  font: ${theme.textStyles.boxText.font};
  font-size: ${theme.fontSizes.m};
  padding-bottom: 10px;
`

export const SliderInput = styled.input.attrs({
  type: 'range'
})`
  appearance: none;
  background: transparent;
  height: 25px;
  margin: 0;
  width: 100%;

  &::-webkit-slider-thumb {
    -webkit-apearance: none;
  }

  &:focus {
    outline: none;
  }

  &::-webkit-slider-thumb {
    appearance: none;
    background: ${theme.colors['dark-blue3']};
    background-image: url('${resizeIcon}');
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 3px;
    cursor: pointer;
    height: 23px;
    width: 30px;
  }

  &::-webkit-slider-runnable-track {
    background: linear-gradient(
      90deg,
      ${theme.colors['blue-ribbon']} ${props => props.value / props.max * 100}%,
      ${theme.colors['transparent-white']}
        ${props => props.value / props.max * 100}%
    );
    background-position: 1px;
    border: 1px solid ${theme.colors['border-transparent']};
    border-radius: 6px;
    cursor: pointer;
    height: 25px;
    width: 100%;
  }

  &:focus::-webkit-slider-runnable-track {
    background: linear-gradient(
      90deg,
      ${theme.colors['blue-ribbon']} ${props => props.value / props.max * 100}%,
      ${theme.colors['transparent-white']}
        ${props => props.value / props.max * 100}%
    );
    background-position: 1px;
  }
`

export const SliderIndicator = styled.div`
  background: linear-gradient(
    90deg,
    ${theme.colors['blue-ribbon']} ${props => props.value / props.max * 100}%,
    ${theme.colors['border-transparent']}
      ${props => props.value / props.max * 100}%
  );
  height: 1px;
  width: 100%;
`
