import { OVERFLOW_OPACITY_FACTOR } from './defaults' ; import type { UpSetBaseFontSizes , UpSetBaseThemeProps } from './interfaces' ; function propRule ( value , prop = 'font-size' ) { return value ? `${ prop }: ${ value };` : '' ; } export function baseRules ( styleId , theme , fontFamily , fontSizes ) { const hasS = [ ] ; if ( theme . hasSelectionColor ) { hasS . push ( `fill: ${ theme . hasSelectionColor };` ) ; } const hasSelectionOpacity = theme . hasSelectionOpacity != null && theme . hasSelectionOpacity >= 0 ; if ( hasSelectionOpacity ) { hasS . push ( `fill-opacity: ${ theme . hasSelectionOpacity };` ) ; } return { p : propRule , root : `
  .root-${ styleId } {
    ${ propRule ( fontFamily , 'font-family' ) }
  }
  ` , text : `
  .titleTextStyle-${ styleId } {
    fill: ${ theme . textColor };
    ${ propRule ( fontSizes . title ) }
  }
  .descTextStyle-${ styleId } {
    fill: ${ theme . textColor };
    ${ propRule ( fontSizes . description ) }
  }

  .legendTextStyle-${ styleId } {
    fill: ${ theme . textColor };
    ${ propRule ( fontSizes . legend ) }
    text-anchor: middle;
    dominant-baseline: hanging;
    pointer-events: none;
  }
  ` , hasSFill : hasS . join ( ' ' ) , hasSStroke : hasS . join ( ' ' ) . replace ( 'fill:' , 'stroke:' ) . replace ( 'fill-' , 'stroke-' ) , fill : `
  .fillPrimary-${ styleId } { fill: ${ theme . color }; fill-opacity: ${ theme . opacity }; }
  .fillOverflow1-${ styleId } { fill-opacity: ${ theme . opacity * OVERFLOW_OPACITY_FACTOR [ 0 ] }; }
  .fillOverflow2-${ styleId } { fill-opacity: ${ theme . opacity * OVERFLOW_OPACITY_FACTOR [ 1 ] }; }
  ${ hasS . length > 0 ? `.root-${ styleId }[data-selection] .fillPrimary-${ styleId } { ${ hasS . join ( ' ' ) } }` : '' }
  ${ hasSelectionOpacity ? `
      .root-${ styleId }[data-selection] .fillOverflow1-${ styleId } { fill-opacity: ${ theme . opacity * OVERFLOW_OPACITY_FACTOR [ 0 ] }; }
      .root-${ styleId }[data-selection] .fillOverflow2-${ styleId } { fill-opacity: ${ theme . opacity * OVERFLOW_OPACITY_FACTOR [ 1 ] }; }` : '' }
  ${ theme . selectionColor ? `.fillSelection-${ styleId } { fill: ${ theme . selectionColor }; }` : '' }
  .fillTransparent-${ styleId } { fill: transparent; }

  .selectionHint-${ styleId } {
    fill: transparent;
    pointer-events: none;
    ${ propRule ( theme . selectionColor , 'stroke' ) }
  }
  .clickAble-${ styleId } {
    cursor: pointer;
  }

  .startText-${ styleId } {
    text-anchor: start;
  }
  .endText-${ styleId } {
    text-anchor: end;
  }
  .pnone-${ styleId } {
    pointer-events: none;
  }` , export : `
  .exportTextStyle-${ styleId } {
    fill: ${ theme . textColor };
    ${ propRule ( fontSizes . exportLabel ) }
  }
  .exportButtons-${ styleId } {
    text-anchor: middle;
  }
  .exportButton-${ styleId } {
    cursor: pointer;
    opacity: 0.5;
  }
  .exportButton-${ styleId }:hover {
    opacity: 1;
  }
  .exportButton-${ styleId } > rect {
    fill: none;
    stroke: ${ theme . textColor };
  }
  ` , } ; }