import { css } from 'styled-components';
import { prefixSelectors } from '../../utils/autoPrefix';
import color from '../../utils/color';
import { animationCurve } from '../../utils/animations';

export const style = ({ theme, percent, disabled, withLabel }) => css`
  display: block;
  width: 100%;
  position: relative;
  z-index: 1;
  padding: ${withLabel ? '2em 0' : '0'};

  label {
    position: absolute;
    display: block;
    font-size: 11px;
    padding: 0.3em 0.5em;
    top: 0;
    width: 100%;
    color: ${theme.base06};

    > span {
      color: ${theme.base04};
    }
  }

  input {
    opacity: ${disabled ? '0.7' : '1'};
    outline: none;
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin: 0;
    cursor: pointer;
    color: inherit;
    background-color: ${theme.base02};
    background-image: linear-gradient(
      90deg,
      currentcolor,
      currentcolor ${percent}%,
      transparent ${percent}%
    );
    background-clip: content-box;
    height: 0.5em;
    border-radius: 999px;
    appearance: none;
    font-size: 1em;
  }

  ${prefixSelectors(
    'input',
    ['webkit-slider-thumb', 'moz-range-thumb', 'ms-thumb'],
    `{
    width: 1.5em;
    height: 1.5em;
    background-image: none;
    background-color: ${percent === 0 ? theme.base00 : 'currentcolor'};
    border: ${percent === 0 ? `5px solid ${theme.base03}` : 'none'};;
    border-radius: 50%;
    appearance: none;
    transition: transform 0.18s ${animationCurve},
      border 0.18s ${animationCurve},
      box-shadow 0.18s ${animationCurve},
      background 0.28s ${animationCurve};
  }`
  )}

  ${prefixSelectors(
    'input:focus:not(:active)',
    ['webkit-slider-thumb', 'moz-range-thumb', 'ms-thumb'],
    `{
    box-shadow: 0 0 0 8px ${color(theme.base0D, 'alpha', 0.5)};
    transform: scale(1.2);
  }`
  )}

  input::-moz-focus-outer {
    border: 0;
  }
`;