@import '~scss/variables';

.wrapper {
  width: 100%;

  :global {
    .recharts-cartesian-grid-horizontal {
      line {
        stroke-dasharray: 3;
      }
    }

    .recharts-cartesian-axis-line {
      stroke: $light-color04;
    }

    span {
      fill: $dark-color01;
    }

    .recharts-tooltip-wrapper {
      max-width: 90%;
    }

    .recharts-default-tooltip {
      background-color: $dark-color06 !important;
      border-radius: 4px;
      color: $white;
      opacity: 0.9;
    }

    .recharts-tooltip-item {
      word-break: break-all;
      line-height: 1.2em;
      white-space: break-spaces;
      &:before {
        content: '•';
        font-size: 1.5em;
        margin-right: 0.3em;
        vertical-align: middle;
      }
      & > span {
        color: $white !important;
      }
    }
  }
}
