import { css } from 'styled-components';

import type { FlattenSimpleInterpolation } from 'styled-components';

export function headingAnchorCss(className = 'anchor'): FlattenSimpleInterpolation {
  return css`
    .${className}.before {
      position: absolute;
      left: 0;
      transform: translateX(-100%);
      padding-right: var(--heading-anchor-offset-right);
    }

    .${className}.after {
      display: inline-block;
      padding-left: 4px;
    }

    svg,
    .${className} svg {
      fill: var(--heading-anchor-color);
      visibility: hidden;

      background-image: var(--heading-anchor-icon);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    :hover .${className} svg,
    .${className}:focus svg {
      visibility: visible;
    }
  `;
}