import styled from "styled-components";
export const Wrapper = styled.div `
  position: relative;
`;
// FIXME missing #dde3eb color in theme
export const Svg = styled.svg `
  .xAxis > .domain {
    stroke: #dde3eb;
  }

  .tick {
    opacity: 0;
  }
`;
export const Tooltip = styled.div `
  opacity: 0;
  position: absolute;

  padding: 8px;
  border: 1px solid ${({ theme }) => theme.new?.palette?.accent.normal};
  background-color: ${({ theme }) => theme.new?.palette?.bg.light ?? "#fff"};
  border-radius: 4px;
  pointer-events: none;

  p {
    margin: 0;

    font-family: ${({ theme }) => theme.new?.typography.fontFamily ?? "Geometria, Verdana, sans-serif"};

    font-size: ${({ theme }) => theme.new?.typography["p-sm"].fontSize ?? "14px"};
  }

  .tooltip-label {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
`;
//# sourceMappingURL=d3-barchart.styled.js.map