@use "@/styles/vuetify/_variables.scss" as vuetify;
@use "@/styles/mixin/mixin";

.v-application .apexcharts-canvas {
  &line[stroke="transparent"] {
    display: "none";
  }

  .apexcharts-xaxistooltip {
    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
    background: rgb(var(--v-theme-grey-50));
    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));

    &::after {
      border-block-end-color: rgb(var(--v-theme-grey-50));
    }

    &::before {
      border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
    }
  }

  .apexcharts-yaxistooltip {
    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
    background: rgb(var(--v-theme-grey-50));

    &::after {
      border-inline-start-color: rgb(var(--v-theme-grey-50));
    }

    &::before {
      border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity));
    }
  }

  .apexcharts-xaxistooltip-text,
  .apexcharts-yaxistooltip-text {
    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
  }

  .apexcharts-menu {
    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
    border-radius: 6px;
    background: rgb(var(--v-theme-surface));

    .apexcharts-menu-item {
      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
    }
  }

  .apexcharts-menu-icon,
  .apexcharts-pan-icon,
  .apexcharts-reset-icon,
  .apexcharts-selection-icon,
  .apexcharts-toolbar-custom-icon,
  .apexcharts-zoom-icon,
  .apexcharts-zoomin-icon,
  .apexcharts-zoomout-icon {
    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .apexcharts-menu-icon:hover svg,
  .apexcharts-reset-icon:hover svg,
  .apexcharts-selection-icon:not(.apexcharts-selected):hover svg,
  .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg,
  .apexcharts-zoomin-icon:hover svg,
  .apexcharts-zoomout-icon:hover svg {
    fill: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
  }

  .apexcharts-tooltip {
    @include mixin.elevation(12);

    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
    background: rgb(var(--v-theme-surface));

    .apexcharts-tooltip-title {
      border-color: rgba(var(--v-border-color), var(--v-border-opacity));
      background: rgb(var(--v-theme-surface));
      font-weight: 600;
    }

    &.apexcharts-theme-light {
      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
    }

    &.apexcharts-theme-dark {
      color: white;
    }

    .apexcharts-tooltip-series-group:first-of-type {
      padding-block-end: 0;
    }
  }

  .apexcharts-text,
  .apexcharts-tooltip-text,
  .apexcharts-datalabel-label,
  .apexcharts-datalabel,
  .apexcharts-xaxistooltip-text,
  .apexcharts-yaxistooltip-text,
  .apexcharts-legend-text {
    font-family: vuetify.$body-font-family !important;
  }

  .apexcharts-pie-label {
    fill: #fff;
    filter: none;
  }

  .apexcharts-marker {
    box-shadow: none;
  }

  .apexcharts-legend-marker {
    margin-inline-end: 0.3875rem !important;
  }
}
