import { css, createGlobalStyle } from 'styled-components';
const sliderStyle = css `
  .ant-slider {
    &,
    &:hover {
      .ant-slider-rail {
        background-color: ${({ theme }) => theme.input.disabled.bg};
      }
    }

    .ant-slider-track {
      background-image: linear-gradient(
        -90deg,
        ${({ theme }) => theme.gradient.from} 0%,
        ${({ theme }) => theme.gradient.to} 100%
      );
    }

    &,
    &:hover {
      .ant-slider-handle {
        background-color: ${({ theme }) => theme.background.content.secondary};
        &,
        &:not(.ant-tooltip-open) {
          border-color: ${({ theme }) => theme.main};
        }

        &:focus {
          box-shadow: none;
        }
      }
    }
  }
`;
const SliderStyle = createGlobalStyle `${sliderStyle}`;
export default SliderStyle;
