@use '../variables' as *;

$lume-alluvial-text-color: $lume-color-neutral-100;

$lume-alluvial-node-opacity: 0.7 !default;
$lume-alluvial-node-opacity-faded: 0.3 !default;
$lume-alluvial-node-opacity-focused: 1 !default;

$lume-alluvial-link-opacity: 0.3 !default;
$lume-alluvial-link-opacity-faded: 0.1 !default;
$lume-alluvial-link-opacity-focused: 0.5 !default;

.lume-alluvial-group {
  $b: &;

  &__node {
    &--faded {
      #{$b}__node-block,
      #{$b}__node-text {
        opacity: $lume-alluvial-node-opacity-faded;
      }
    }

    &--focused {
      #{$b}__node-block {
        opacity: $lume-alluvial-node-opacity-focused;
      }
    }
  }

  &__node-block {
    transition: opacity $lume-transition-time-long;
    opacity: $lume-alluvial-node-opacity;
  }

  &__node-text {
    cursor: default;
    fill: $lume-alluvial-text-color;
    transition: opacity $lume-transition-time-long;
    line-height: $lume-line-height-xs;

    &--left {
      text-anchor: end;

      #{$b}__node-foreign {
        text-align: right;
      }
    }
  }

  &__label-wrapper {
    display: flex;
    align-self: flex-start;
  }

  &__node-label {
    max-width: 100%;
    overflow-wrap: break-word;
    color: $lume-alluvial-text-color;
  }

  &__node-value {
    font-weight: $lume-font-weight-medium;
  }

  .lume-alluvial-link-group {
    fill: none;
    mix-blend-mode: multiply;
  }

  &__link {
    stroke-opacity: $lume-alluvial-link-opacity;
    transition: stroke-opacity $lume-transition-time-long;

    animation: strokeReset $lume-transition-time-full linear forwards;

    &--faded {
      stroke-opacity: $lume-alluvial-link-opacity-faded;
    }

    &--focused {
      stroke-opacity: $lume-alluvial-link-opacity-focused;
    }

    &--ghost {
      stroke-opacity: 0;
      animation: unset;
      transition: unset;
    }
  }

  &__node-header {
    font-weight: $lume-font-weight-medium;
    text-anchor: middle;
    text-align: center;
    cursor: default;
  }
}

@keyframes strokeReset {
  to {
    stroke-dashoffset: 0;
  }
}