@require "../util.styl";

.event-list {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding-bottom: 40px;
  gap: 8px;

  .event-list-item {
    display: block;
    position: relative;
    box-sizing: border-box;

    header {
      padding-right: 24px;

      & > span + span {
        margin-left: 0.4em;
      }
    }

    &.selected {
      &:after {
        pseudo();
        left: 100%;
        top: 50%;
        margin-top: -6px;
        margin-left: 6px;
        width: 12px;
        height: 12px;
        background: cyan;
        border-radius: 999px;
      }
    }

    &.branch.unknown {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 8px;

      &:after {
        top: 0;
        bottom: 0;
        height: unset;
        width: 2px;
        margin-left: -12px;
        margin-top: 0;

        // background: repeating-linear-gradient(45deg, transparent, transparent 4px, cyan 4px, cyan 6px, transparent 6px);
      }

    }

    &:not(.naked) {
      &.branch > header, &.leaf {
        position: relative;
        margin: 0 24px;
        padding: 4px 6px;
        display: flex;
        border-radius: 4px;
        background: var(--section-bg);
        border: 1px solid var(--section-border);
        box-shadow: inset 0 1px 5px var(--shadow);

        & > .ui-collapsible-trigger-icon {
          position: absolute;
          right: 100%;
        }
      }
    }

    &.block {
      margin: 0px 24px;
      header {
        position: absolute;
        top: 4px; right: -16px;
        z-index: 1;
      }

      pre {
        max-height: 7em;
        padding-top: 1.75em;
        margin: 0;

        overflow: hidden;
      }

      code {
        overflow: hidden;
      }
    }

    .event-detail {
      opacity: 0.4;
    }
  }

  &.sub {
    padding-left: 24px;
  }
}
