@use "../../../feature/theme/theme" as theme;

$indent-width:               44px;
$guiderail-post-left-offset: 26px;
$guiderail-width:            1px;
$guiderail-post-top-offset:  18px;
$post-top-margin:            22px;
$button-width:               18px;
$button-bottom-offset:       20px;
$post-border-width:          1px; // change to 0px in modern look&feel

.tree-post.indent {
  &.indent-none {margin-left: 0;}
  &.indent-1 {margin-left: $indent-width * 1;}
  &.indent-2 {margin-left: $indent-width * 2;}
  &.indent-3 {margin-left: $indent-width * 3;}
  &.indent-4 {margin-left: $indent-width * 4;}
  &.indent-5 {margin-left: $indent-width * 5;}
  &.indent-6 {margin-left: $indent-width * 6;}
  &.indent-7 {margin-left: $indent-width * 7;}
  &.indent-8 {margin-left: $indent-width * 8;}
  &.indent-9 {margin-left: $indent-width * 9;}
  &.indent-10 {margin-left: $indent-width * 10;}
  &.indent-11 {margin-left: $indent-width * 11;}
  &.indent-12 {margin-left: $indent-width * 12;}
}

.post-guiderail {
  width:        $guiderail-post-left-offset;
  left:         -$guiderail-post-left-offset;
  border-width: $guiderail-width;
  border-style: solid;
  border-top:   none;
  border-right: none;
  @include theme.property(border-color, #dddddd, #333333);
}

.post-guiderail-button {
  left:             - ($button-width + $guiderail-width)/2;
  width:            $button-width;
  height:           $button-width;
  bottom:           - ($button-width + $guiderail-width)/2;

  @include theme.property(border, $guiderail-width solid #dddddd, $guiderail-width solid #333333);
  border-radius:    $button-width/2;
  background-color: var(--body-background);
}

.post-guiderail-to-parent {
  height:                    $post-top-margin + $guiderail-post-top-offset;
  top:                       -$guiderail-post-top-offset;
  border-bottom-left-radius: 6px;
  border-top:                none;
  border-right:              none;
}

.post-guiderail-to-toggle {
  border-bottom: none;
  height:        calc(100% - $button-bottom-offset);
  left:          $indent-width - $guiderail-post-left-offset;
}

.post-guiderail-to-child {
  border-bottom: none;
  height:        $button-bottom-offset;
  bottom:        0;
  left:          $indent-width - $guiderail-post-left-offset;
}

.post-guiderail-to-sibling {
  border-bottom: none;
  top:           0;
  height:        calc(100% + $post-border-width * 2);
}

.post-guiderail-of-parent {
  border-bottom: none;
  top:           -$guiderail-post-top-offset;
  height:        calc(100% + $guiderail-post-top-offset + $post-border-width * 2);

  &.post-guiderail-of-parent-1 { left: -($guiderail-post-left-offset + $indent-width * 1); }
  &.post-guiderail-of-parent-2 { left: -($guiderail-post-left-offset + $indent-width * 2); }
  &.post-guiderail-of-parent-3 { left: -($guiderail-post-left-offset + $indent-width * 3); }
  &.post-guiderail-of-parent-4 { left: -($guiderail-post-left-offset + $indent-width * 4); }
  &.post-guiderail-of-parent-5 { left: -($guiderail-post-left-offset + $indent-width * 5); }
  &.post-guiderail-of-parent-6 { left: -($guiderail-post-left-offset + $indent-width * 6); }
  &.post-guiderail-of-parent-7 { left: -($guiderail-post-left-offset + $indent-width * 7); }
  &.post-guiderail-of-parent-8 { left: -($guiderail-post-left-offset + $indent-width * 8); }
  &.post-guiderail-of-parent-9 { left: -($guiderail-post-left-offset + $indent-width * 9); }
  &.post-guiderail-of-parent-10 { left: -($guiderail-post-left-offset + $indent-width * 10); }
}
