import { Keyframes } from '../../_util/cssinjs';
import genComponentStyleHook from '../../theme/util/genComponentStyleHook';
import { MAX_BEAM_COLOR_STOP_PERCENT } from '../util';
const genBorderBeamStyle = token => {
  const {
    componentCls
  } = token;
  const defaultBeamGradient = `linear-gradient(to left, ${token.colorPrimary} 0%, ${token.colorPrimaryHover} ${MAX_BEAM_COLOR_STOP_PERCENT}%, transparent)`;
  // =========================== Animation ============================
  const antBorderBeamMove = new Keyframes('antBorderBeamMove', {
    from: {
      offsetDistance: '0%'
    },
    to: {
      offsetDistance: '100%'
    }
  });
  // ============================= Style ==============================
  return {
    [componentCls]: {
      // Container
      display: 'none',
      position: 'absolute',
      inset: 'var(--ant-border-beam-inset-offset, 0px)',
      borderRadius: 'var(--ant-border-beam-border-radius, 0px)',
      zIndex: 1,
      overflow: 'hidden',
      pointerEvents: 'none',
      // Border Beam
      padding: token.lineWidth,
      // Border Beam Effect
      '@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor))': {
        WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
        WebkitMaskComposite: 'xor',
        mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
        maskComposite: 'exclude',
        '@supports (offset-path: rect(0 auto auto 0 round 1px))': {
          display: 'block',
          '&::before': {
            content: '""',
            position: 'absolute',
            top: 0,
            left: 0,
            width: 100,
            aspectRatio: '1 / 1',
            opacity: 0.95,
            backgroundImage: 'var(--ant-border-beam-beam-gradient, ' + defaultBeamGradient + ')',
            offsetAnchor: '90% 50%',
            offsetDistance: '0%',
            offsetPath: 'rect(0 auto auto 0 round 100px)',
            offsetRotate: 'auto',
            animationName: antBorderBeamMove,
            animationDuration: '6s',
            animationTimingFunction: 'linear',
            animationIterationCount: 'infinite',
            willChange: 'offset-distance'
          }
        }
      },
      '@media (prefers-reduced-motion: reduce)': {
        '&::before': {
          display: 'none'
        }
      }
    }
  };
};
export default genComponentStyleHook('BorderBeam', genBorderBeamStyle);