@import "src/stylesheets/to-remove/colors.scss";

.ToolsArrowsChart {
  margin: auto;
  @media (max-width: 800px) {
    padding-left: 0;
    padding-right: 0;
  }
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    fill: $greyLight;
    overflow: visible;
  }
  @keyframes fadeIn {
      0% { opacity: 0; }
    100% { opacity: 1; }
  }

  &__axis {
    stroke: $navyLighter;
    stroke-width: 1px;

    &__label {
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: 0.66em;
      font-weight: 600;
      fill-opacity: 0.5;
      dominant-baseline: middle;
    }
  }

  @keyframes gradientLineSegmentIn {
      0% { stroke-opacity: 0; }
    100% { stroke-opacity: 1; }
    //   0% { stroke-dashoffset: -20px; }
    // 100% { stroke-dashoffset: 0; }
  }
  &__tool {
    &--is {
      &-hidden {
        opacity: 0;
        pointer-events: none;
      }
      &-active {
        .ToolsArrowsChart {
          &__gradient-line {
            stroke-opacity: 0;
            animation: gradientLineSegmentIn 0.2s ease-out;
            animation-fill-mode: forwards;
            @for $i from 0 to 100 {
              &--nth-#{$i} {
                animation-delay: #{$i * 0.03}s;
              }
            }
          }
        }
      }

      &-hovering {
        .ToolsArrowsChart {
            &__year {
            fill-opacity: 1;
          }
        }
      }

      &-hovering-other {
        // opacity: 0.3;

        text {
          fill-opacity: 0;
          stroke-opacity: 0;
          // opacity: 0;
        }

        .ToolsArrowsChart {
          &__gradient-line {
            stroke: $navy;
            stroke-width: 1 !important;
          }

          &__now {
            fill-opacity: 0.2 !important;
          }
        }
      }
    }
  }
  &__hover-background {
    stroke-width: 30px;
    stroke: rgba(0, 0, 0, 0);
    fill: none;
  }

  &__now {
  }
  &__year {
    fill-opacity: 0;
  }

  &__gradient-line {
    fill: none;
    stroke-width: 4.5px;
    mix-blend-mode: lighten;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }

  @keyframes fadeInSlideUp {
      0% { fill-opacity: 0; transform: translateY(1em); }
    100% { fill-opacity: 1; transform: translateY(0); }
  }

  &__year {
    font-size: 0.8em;
    font-weight: 600;
    pointer-events: none;
    // fill-opacity: 0; transform: translateY(1em);
    // animation: fadeInSlideUp 0.2s ease-out;
    // animation-fill-mode: forwards;
  }
  &__label-background {
    font-size: 0.8em;
    font-weight: 600;
    stroke: $navyDark;
    stroke-width: 3px;
  }

  &__label {
    font-size: 0.8em;
    font-weight: 600;
    // opacity: 0;
    // animation: fadeIn 0.9s ease-out;
    // animation-fill-mode: forwards;
    // animation-delay: 0.1s;

    &__box {
      cursor: default;

      text {
        pointer-events: none;
        user-select: none;
      }
    }
  }
}

.ToolsArrowsChart__label{
  cursor: pointer;
  &:hover{
    fill: $white;
  }
}