// rainbow threads

// User can place this in their QuickCSS/Custom CSS to disable rainbow threads (willow is soooo boring)
// :root {
//   --ctp-rainbow-thread-disabled: ;
// }
& {
  --thread-default: var(--ctp-rainbow-thread-disabled) var(--channels-default);
  --thread-core: var(--ctp-rainbow-thread-disabled) var(--text-primary);
  --thread-muted: var(--ctp-rainbow-thread-disabled) var(--interactive-muted);
}

@mixin rainbow-vars($colour) {
  --channels-default: var(--thread-default, #{fade-out($colour, 0.3)});
  --text-primary: var(--thread-core, #{$colour});
  --interactive-hover: var(--thread-core, #{$colour});
  --interactive-active: var(--thread-core, #{$colour});
  --interactive-muted: var(--thread-muted, #{mix($colour, $crust, 50%)});
}

@mixin rainbow-thread($n, $colour) {
  & > li:nth-of-type(6n + #{$n}) {
    @include rainbow-vars($colour);
  }
}

@function rainbow-gradient($colours) {
  $output: ();

  @for $i from 0 to length($colours) {
    $mixed: mix(nth($colours, $i + 1), $crust, 50%);
    $start: calc(var(--step) * #{$i});
    $end: calc(var(--step) * #{$i + 1});

    $output: append($output, "#{$mixed} #{$start}, #{$mixed} #{$end}", comma);
  }

  @return $output;
}

ul[class^="content_"] > li[class^="container_"] > ul[role="group"] {
  & > div[class^="spineBorder"] {
    // Account for UI Density setting
    // 30px is the size of each spline section
    // density padding is either 20px, 24px or 28px. get the padding px count
    // --step: calc(var(--channels-name-line-height) - 20px + 30px);
    --step: calc(var(--channels-name-line-height) + 10px);

    // Repeating gradient on core spine element to not have unsightly gaps between the splines of mixin(rainbow-thread)
    // `to bottom` default
    background: var(
      --thread-muted,
      repeating-linear-gradient(
        #{rainbow-gradient(($red, $peach, $yellow, $green, $blue, $mauve))}
      )
    );
  }

  @include rainbow-thread(1, $red);
  @include rainbow-thread(2, $peach);
  @include rainbow-thread(3, $yellow);
  @include rainbow-thread(4, $green);
  @include rainbow-thread(5, $blue);
  @include rainbow-thread(6, $mauve);

  // A singular thread is brand coloured
  & li:only-of-type {
    @include rainbow-vars($brand);
  }
}
