import { StyleProviderFunction } from '@rax-ui/styles';

const StyleProvider: StyleProviderFunction = (theme) => {
  const { Core = {} } = theme;

  return {
    range: {
      position: 'relative',
      boxSizing: 'border-box',
      touchAction: 'none',
      height: Core['s-8'],
    },
    range__track: {
      position: 'relative',
      top: Core['s-4'],
      height: Core['s-1'] / 2,
      backgroundColor: Core['color-line1-3'],
    },
    'range__track--selected': {
      position: 'absolute',
      height: Core['s-1'] / 2,
      backgroundColor: Core['color-brand1-6'],
    },
    'range--disabled__track': {
      backgroundColor: Core['color-line1-3'],
    },
    'range--disabled__track--selected': {
      backgroundColor: Core['color-line1-3'],
    },
    range__thumb: {
      position: 'absolute',
      width: Core['s-8'],
      height: Core['s-8'],
      marginLeft: -Core['s-4'],
      backgroundColor: Core['color-white'],
      borderRadius: Core['s-4'],
      borderWidth: Core['s-1'] / 4,
      borderStyle: 'solid',
      borderColor: Core['color-line1-2'],
      boxShadow: 'none',
    },
    'range__thumb--active': {
      boxShadow: Core['shadow-2'],
    },
    range__mark: {
      position: 'absolute',
      width: Core['line-3'],
      height: Core['s-4'],
      top: -Core['s-2'],
      backgroundColor: Core['color-line1-3'],
    },
    'range__mark--active': {
      backgroundColor: Core['color-brand1-6'],
    },
    'range--disabled__mark': {
      backgroundColor: Core['color-text1-1'],
    },
    'range--disabled__mark--active': {
      backgroundColor: Core['color-text1-2'],
    },
    range__label: {
      position: 'absolute',
      transform: 'translateX(-50%)',
      top: Core['s-4'],
      color: Core['color-text1-2'],
      fontSize: Core['font-size-footnote'],
      fontWeight: Core['font-weight-5'],
    },
    'range__label--active': {
      color: Core['color-brand1-6'],
    },
    'range--disabled__label': {},
    'range--disabled__label--active': {
      color: Core['color-text1-3'],
    },
    range__tooltip: {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      position: 'absolute',
      bottom: Core['s-10'],
      left: -Core['s-2'],
      width: Core['s-10'],
      height: Core['s-12'],
      borderRadius: Core['s-1'],
      boxShadow: Core['shadow-1'],
      backgroundColor: Core['color-white'],
      color: Core['color-text1-3'],
    },
    range__arrow: {
      display: 'block',
      transform: `translate(0px, ${Core['line-3']}px) rotate(45deg)`,
      position: 'absolute',
      bottom: Core['s-10'],
      left: Core['s-2'],
      borderWidth: Core['s-1'],
      borderStyle: 'solid',
      borderColor: Core['color-white'],
      borderTopColor: 'transparent',
      borderLeftColor: 'transparent',
      boxShadow: Core['shadow-1'],
    },
  };
};

export default StyleProvider;