mixin wrapper(connect=true)
  .bracket__group
    .bracket__group-wrapper
      block
    if connect
      .bracket__group-connector

mixin item(number)
  .bracket__item
    .bracket__item-number
      if number < 10
        | 0#{number}
      else
        | #{number}
    .bracket__item-name Item #{number}

.bracket
  .bracket__column(style="--column: 1")
    - for (let i = 0; i < 16; i++)
      +wrapper
        +item(i * 2 + 1)
        +item(i * 2 + 2)
        
  .bracket__column(style="--column: 2")
    - for (let i = 0; i < 16; i++)
      +wrapper
        +item(i * 2 + 1)
  .bracket__column(style="--column: 3")
    - for (let i = 0; i < 8; i++)
      +wrapper
        +item(i * 4 + 1)
  .bracket__column(style="--column: 4; --offset: 1")
    - for (let i = 0; i < 4; i++)
      +wrapper
        +item(i * 8 + 1)
  .bracket__column(style="--column: 5; --offset: 2")
    - for (let i = 0; i < 2; i++)
      +wrapper
        +item(i * 16 + 1)
  .bracket__column(style="--column: 6; --offset: 3")
    +wrapper(false)
      +item(1)
    

body {
  margin: 0;
  font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
  background-color: #f4f3f0;
}

.bracket {
  $p: &;

  padding: 8px 16px;
  display: flex;

  &__column {
    width: 200px;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: space-around;
    transform: translateX(calc(-80px * var(--offset, 0)));
    
    &:nth-child(1) {
      #{$p}__group {
        &-connector::after {
          position: absolute;
          top: calc(50% - 0.5px);
          left: 0;
          width: 16px;
          height: 1px;
          background-color: var(--border-color);
          content: '';
        }
      }
    }
    
    &:nth-child(2) {
      #{$p}__group {
        &-connector::after {
          position: absolute;
          left: 0;
          width: 50%;
          height: calc(50% * var(--column) *  var(--column));
          border: 1px solid var(--border-color);
          border-left: 0;
          content: '';
        }

        &:nth-child(2n + 1) {
          #{$p}__group-connector::after {
            top: 50%;
            border-bottom: 0;
          }
        }
        
        &:nth-child(2n) {
          #{$p}__group-connector::after {
            bottom: 50%;
            border-top: 0;
          }
        }
      }
    }
    
    &:nth-child(2),
    &:nth-child(3) {
      #{$p}__group {
        &-wrapper {
          position: relative;
          
          &::before {
            position: absolute;
            top: calc(50% - 0.5px);
            right: 100%;
            width: 8px;
            height: 1px;
            background-color: var(--border-color);
            content: '';
          }
        }
      }
    }
    
    &:nth-child(1n + 3) {
      #{$p}__group {
        &-connector::after {
          position: absolute;
          left: -48px;
          width: 1px;
          height: calc(50% * var(--column) *  var(--column));
          background-color: var(--border-color);
          content: '';
          z-index: -1;
        }

        &:nth-child(2n + 1) {
          #{$p}__group-connector::after {
            top: 50%;
          }
        }
        
        &:nth-child(2n) {
          #{$p}__group-connector::after {
            bottom: 50%;
          }
        }
      }
    }
  }
  
  &__group {
    --border-radius: 4px;
    --border-width: 1px;
    --border-color: #e3e3e3;
    
    margin: 8px 0;
    display: grid;
    grid-template-columns: 1fr max-content;
    
    &-wrapper {
      gap: 1px;
      border: 1px solid var(--border-color);
      border-radius: calc(var(--border-radius) + var(--border-width));
      display: grid;
      grid-template-rows: 1fr;
      background-color: var(--border-color);

      #{$p}__item {
        margin: 0;

        &:first-child {
          --border-top-radius: var(--border-radius);
        }

        &:last-child {
          --border-bottom-radius: var(--border-radius);
        }
      }
    }
    
    &-connector {
      position: relative;
      width: 16px;
    }
  }
  
  &__item {
    --border-top-radius: 0px;
    --border-bottom-radius: 0px;

    padding: 0 4px;
    border-radius: var(--border-top-radius) var(--border-top-radius) var(--border-bottom-radius) var(--border-bottom-radius);
    display: flex;
    align-items: center;
    background-color: #ffffff;

    &-number {
      padding: 4px;
      font-size: 0.8rem;
      color: #b3b3b3;
    }
    
    &-name {
      padding: 4px;
      font-weight: 600;
      white-space: nowrap;
    }
  }
}