﻿.intensity-color-list-wrapper {
  display: flex;
  height: auto;
  position: absolute;
  left: 0rem;
  bottom: 40px;
  align-items: flex-end;
  flex-direction: column;
  flex-wrap: nowrap;
  pointer-events: none;
  width: 45px;

  .intensity-color-list {
    display: flex;
    flex-direction: column-reverse;
    height: 210px;

    li {
      display: flex;
      margin: 0 0 0 30px;
      position: relative;
      height: 100%;
      color: #ffffff91;
      font-size: 13px;

      .color {
        font-size: 0;
        width: 10px;
        height: 100%;
        margin: 0 7px 0 0;
        top: 0.5rem;
        border-right: solid 1px #2b2b2b;
        border-left: solid 1px #2b2b2b;

        &::after {
          content: "";
          width: 5px;
          height: 1px;
          background-color: #ffffff91;
          position: absolute;
          top: 0px;
          right: -6px;
        }
      }
    }

    li {
      padding-left: 18px;
    }

    li .color {
      position: absolute;
      left: -10px;
    }
  }

  .intensity-num-1 {
    order: 4;
  }

  .intensity-num-2 {
    order: 5;
  }

  .intensity-num-3 {
    order: 6;
  }

  .intensity-num-4 {
    order: 7;
  }

  .intensity-num-5 {
    order: 8;
  }

  .intensity-num-6 {
    order: 9;
  }

  .intensity-num-7 {
    order: 10;
  }

  .intensity-num-8 {
    order: 11;
  }

  .intensity-num-9 {
    order: 12;
  }

  .intensity-num-1 .color {
    background: linear-gradient(
      var(--intensity-1),
      var(--intensity-0) 80%,
      var(--intensity-0) 40%,
      var(--intensity-0)
    );
    border-bottom: solid 1px #2b2b2b;
  }

  .intensity-num-2 .color {
    background: linear-gradient(var(--intensity-2), var(--intensity-1));
  }

  .intensity-num-3 .color {
    background: linear-gradient(var(--intensity-3), var(--intensity-2));
  }

  .intensity-num-4 .color {
    background: linear-gradient(var(--intensity-4), var(--intensity-3));
  }

  .intensity-num-5 .color {
    background: linear-gradient(var(--intensity-5), var(--intensity-4));
  }

  .intensity-num-6 .color {
    background: linear-gradient(var(--intensity-6), var(--intensity-5));
  }

  .intensity-num-7 .color {
    background: linear-gradient(var(--intensity-7), var(--intensity-6));
  }

  .intensity-num-8 .color {
    background: linear-gradient(var(--intensity-8), var(--intensity-7));
  }

  .intensity-num-9 .color {
    background: linear-gradient(var(--intensity-9), var(--intensity-8));
    border-top: solid 1px #2b2b2b;
  }
}
