/** @format */

import styled from 'styled-components';

import { AttrType } from './data';

const Container = styled.div<AttrType>`
  .rc-slider {
    margin: unset;
    padding: unset;
    height: ${props => props.size.height}px;
  }

  /* 轨道 */
  .rc-slider-rail {
    height: ${props => props.size.height}px;
    border-radius: ${props => props.ordinary.railBorderRadius}px;
    background-color: ${props => props.ordinary.railBgColor};
  }

  /* 轨迹 */
  .rc-slider-track {
    height: ${props => props.size.height}px;
    border-radius: ${props => props.ordinary.railBorderRadius}px;
    background: ${props =>
      props.ordinary.trackColorLinear
        ? `linear-gradient(90deg, ${props.ordinary.trackBgColor1},${props.ordinary.trackBgColor2})`
        : props => props.ordinary.trackBgColor};
  }

  /* 步幅 */
  .rc-slider-step {
    height: ${props => props.size.height}px;
  }

  /* 滑块 */
  .rc-slider-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    top: ${props => (props.size.height - props.ordinary.handleSize) / 2}px;
    margin-top: unset;

    width: ${props => props.ordinary.handleSize}px;
    height: ${props => props.ordinary.handleSize}px;

    background-color: ${props =>
      props.ordinary.isCustomHandle ? 'unset' : props.ordinary.handleBGColor};
    border: ${props =>
      props.ordinary.isCustomHandle
        ? 'unset'
        : props.ordinary.handleBorderSize + 'px'};
    border-style: ${props =>
      props.ordinary.isCustomHandle ? 'unset' : props.ordinary.handleType};
    border-color: ${props =>
      props.ordinary.isCustomHandle ? 'unset' : props.ordinary.handleColor};
    border-radius: ${props =>
      props.ordinary.isCustomHandle
        ? 'unset'
        : props.ordinary.handleRadius + 'px'};
  }
  /* 滑块自定义图标 */
  .rc-slider-handle > span {
    font-size: ${props => props.ordinary.handleSize}px;
  }
  /* 滑块选中状态 */
  .rc-slider-handle:active {
    box-shadow: unset;
  }
  .rc-slider-handle-dragging {
    border-color: unset !important;
    box-shadow: unset !important;
  }
`;

export { Container };