import styled from "styled-components";
export const Wrapper = styled.div(({ height, width }) => `
  height: ${height}px;
  width: ${width}px;
  position: relative;
`);
export const Svg = styled.svg(({ height, width, opacity }) => `
  height: ${height}px;
  width: ${width}px;
  opacity: ${opacity};
  background: transparent;

  .yAxis, .xAxis {
    color: #E8662D;
  }

  .tick line {
    display: none;
    stroke: #E8662D;
    stroke-dasharray: 10, 5;
  }
`);
export const Tooltip = styled.div(({ color }) => `
  opacity: 0;
  position: absolute;
  background-color: rgba(255,255,255, 0.7);
  border: 2px solid ${color};
  border-radius: 4px;
  padding: 8px;
  pointer-events: none;

  p {
    margin: 0;
  }

  .tooltip-group {
    display:flex;
    flex-direction: column;
  }

  .tooltip-text {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    opacity: 1;

    .tooltip-text__marker {
      content: " ";
      box-sizing: border-box;
      height: 5px;
      width: 5px;
      border: 5px solid ${color};
      border-radius: 100%;
      margin-right: 4px;
    }

    .tooltip-text__title, .tooltip-text__value {
      font-family: Medium;
      margin: 4px;
    }
  }

`);
export const Overlay = styled.div(({ color }) => `
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 100;
  border-radius: 4px;

  background-color: ${color};
`);
export const OverlayMessage = styled.div(({ color, fontSize, fontFamily }) => `
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 101;
  font-family: "${fontFamily}";
  font-size: ${fontSize}px;
  color: ${color};
`);
//# sourceMappingURL=styled.js.map