import styled from "styled-components";
export const Wrapper = styled.div `
  position: relative;
`;
export const Svg = styled.svg `
  .xAxis,
  .yAxis {
    color: #b3bdc7;
  }
  .tick line {
    stroke: #ccc;
    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;

  &.multiple {
    border: 2px solid #CCDAE9;
  }

  p {
    margin: 0;
  }

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

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

    .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 {
      font-family: Medium;
    }
  }
  &.left:before {
    content: " ";
    position: absolute;
    border: 10px solid transparent;
    border-right-color: ${color};
    left: -20px;
    top: calc(50% - 10px);
  }

  &.left.multiple:before {
    display: none;
  }

  &.right:before {
    content: " ";
    position: absolute;
    border: 10px solid transparent;
    border-left-color: ${color};
    right: -20px;
    top: calc(50% - 10px);
  }

  &.right.multiple:before {
    display: none;
  }

`);
export const HighlightedPoint = styled.div `
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  position: absolute;
  border-radius: 50%;
  transform: translate(-16px, -16px);
  background-color: ${({ bg }) => bg ?? "red"};
`;
//# sourceMappingURL=styled.js.map