@use 'sass:map';
@use '../../../mx-core/src/base/colors';

@mixin mx-hierarchy-path-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $color-theme: colors.$mx-light;

  @if $is-dark {
    $color-theme: colors.$mx-dark;
  }

  .mx-hierarchy-path-group {
    .mx-hierarchy-path-item {
      &::before,
      &::after {
        border-color: map.get($color-theme, outline);
      }
    }

    .mx-hierarchy-path-line {
      &::before {
        border-color: map.get($color-theme, outline);
      }
    }
  }
}

.mx-hierarchy-path-group {
  position: relative;
  padding-left: 32px;
  display: block;

  .mx-hierarchy-path-item {
    box-sizing: border-box;
    display: block;
    position: relative;
    // For "L" shape line
    &::before {
      content: '';
      display: inline-block;
      position: absolute;
      top: 0;
      left: -24px;
      width: 16px;
      height: 32px;
      border-width: 0 0 1px 1px;
      border-style: solid;
    }
    // For vertical line
    &:not(:last-of-type)::after {
      content: '';
      display: inline-block;
      position: absolute;
      border-width: 0 0 0 1px;
      border-style: solid;
      top: 0;
      left: -24px;
      height: 100%;
    }
  }

  // mx-hierarchy-path-line: only vertical line (no horizontal L-shape)
  .mx-hierarchy-path-line {
    box-sizing: border-box;
    display: block;
    position: relative;

    // For vertical line only
    &::before {
      content: '';
      display: inline-block;
      position: absolute;
      border-width: 0 0 0 1px;
      border-style: solid;
      top: 0;
      left: -24px;
      height: 100%;
    }
  }
}