.chart {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;

  label,
  select {
    margin: -0.375rem;
    padding: 0.375rem;
  }

  select {
    width: auto;
    background: none;
  }

  > div {
    min-height: 0;
    height: 100%;
    margin-right: var(--negative-main-padding);
    margin-left: var(--negative-main-padding);

    & > legend,
    & table > tr > td:not(:last-child) legend {
      position: absolute;
      left: 0;
      right: 0;
      z-index: 20;
      font-size: var(--font-size-xs);
      line-height: var(--line-height-xs);
      pointer-events: none;
      padding: 0;
      top: 0;
      text-transform: lowercase;

      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: var(--main-padding);
        z-index: 1;
        pointer-events: none;
      }

      &::before {
        left: 0;
        background-image: linear-gradient(
          to left,
          transparent,
          var(--background-color)
        );
      }

      &::after {
        right: 0;
        background-image: linear-gradient(
          to right,
          transparent,
          var(--background-color)
        );
      }

      select {
        text-transform: lowercase;
      }

      > div {
        display: flex;
        align-items: center;
        overflow-x: auto;
        padding-inline: var(--main-padding);
        padding-block-start: 0.375rem;

        @media (pointer: coarse) {
          pointer-events: auto;
        }

        > * {
          pointer-events: auto;
        }

        > *:nth-child(2) {
          color: var(--gray);
          padding-inline: 0.75rem;
        }

        small {
          flex-shrink: 0;
        }

        > div:last-child {
          display: flex;
          align-items: center;
          gap: 1rem;
          flex-shrink: 0;

          > div {
            flex: 0;
            height: 100%;
            display: flex;
            align-items: center;

            > label {
              > span {
                display: flex;
              }

              &:has(input:not(:checked)) {
                > span.main > span.name {
                  text-decoration: line-through 1.5px var(--color);
                }

                &:hover {
                  * {
                    color: var(--off-color);
                  }

                  > span.main > span.name {
                    text-decoration-color: var(--orange);
                  }
                }

                &:active {
                  color: var(--orange);
                }
              }
            }

            > a {
              padding-inline: 0.375rem;
              margin-inline: -0.375rem;
              margin-top: 0.1rem;
            }
          }
        }
      }
    }

    & table > tr > td:not(:last-child) legend > div {
      padding-bottom: 0.75rem;
    }

    :is(fieldset:has(> label > input[type="radio"]), label:has(> select)) {
      display: flex;
      flex-shrink: 0;
      gap: 0.375rem;
      cursor: pointer;
    }

    table > tr {
      &:first-child > td:nth-child(2) {
        position: relative;

        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: calc(var(--main-padding) * 2);
          background-image: linear-gradient(
            to bottom,
            var(--background-color),
            transparent
          );
          z-index: 10;
          pointer-events: none;
        }
      }

      &:last-child > td {
        border-top: 1px;
      }
    }

    td:last-child > fieldset:has(> label > input[type="radio"]) {
      position: absolute;
      left: 0;
      z-index: 50;
      display: inline-flex;
      font-size: var(--font-size-xs);
      line-height: var(--line-height-xs);
      align-items: center;
      text-transform: uppercase;
    }

    tr:not(:last-child)
      > td:last-child
      > fieldset:has(> label > input[type="radio"]) {
      top: 0;
      right: 0;
      gap: 0.375rem;
      background-color: var(--background-color);
      padding-left: 0.625rem;
      padding-top: 0.375rem;
      padding-bottom: 0.125rem;

      &::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 1rem;
        background-image: linear-gradient(
          to top,
          transparent,
          var(--background-color)
        );
      }
    }

    > legend {
      top: auto;
      bottom: 1.8rem;
      left: calc(var(--main-padding) * -1);
      right: 50px;
      text-transform: uppercase;

      > div {
        padding-bottom: 0.375rem;

        button {
          color: var(--off-color);
          padding: 0.375rem 0.5rem;
          margin: -0.375rem 0;

          &:first-of-type {
            margin-left: -0.5rem;
          }
        }
      }
    }

    button.capture {
      position: absolute;
      bottom: 0.375rem;
      right: -0.75rem;
      z-index: 50;
      font-size: var(--font-size-xs);
      line-height: var(--line-height-xs);
      color: var(--off-color);
    }
  }

  > div.chart-hint {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    margin: 0;
    z-index: 40;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
    color: var(--off-color);
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    animation: chart-hint 4s 0.2s ease-in-out both;

    &.done {
      animation: none;
      opacity: 0;
      transition: opacity 250ms ease;
    }
  }
}

@keyframes chart-hint {
  0%,
  100% {
    opacity: 0;
  }
  15%,
  85% {
    opacity: 0.85;
  }
}