@use '../core/style/spacing' as *;
@use '@finastra/fds-theme/color' as color;

$uxg-link-list-item-height: 35px;
$uxg-link-list-icon-size: 18px;

$uxg-nav-list-level-icon-size: 18px;
$uxg-nav-list-level-height: 48px;

.uxg-ol {
  margin: $uxg-spacing-0;
  padding: $uxg-spacing-0;
  counter-reset: ordered-list-counter;
  list-style: none;

  & > li,
  & > section {
    display: list-item;
    counter-increment: ordered-list-counter;
    margin: $uxg-spacing-0;
    padding: $uxg-spacing-0;
    margin-bottom: $uxg-spacing-5;

    & > *:first-child,
    .uxg-ol-title {
      display: inline-block;
      margin: $uxg-spacing-0;
      margin-bottom: $uxg-spacing-4;

      + * {
        margin-top: $uxg-spacing-0;
      }
    }

    &::before {
      display: inline-block;
      content: counter(ordered-list-counter);
      border-radius: 50%;
      text-align: center;
      line-height: $uxg-spacing-4;
      width: $uxg-spacing-4;
      height: $uxg-spacing-4;
      margin-right: $uxg-spacing-3;
    }
  }
}

.mat-mdc-list-base.mat-mdc-nav-list.uxg-nav-list-level {
  & > .mat-mdc-list-item {
    height: $uxg-nav-list-level-height;

    .mat-icon {
      width: $uxg-nav-list-level-icon-size;
      height: $uxg-nav-list-level-icon-size;
      font-size: $uxg-nav-list-level-icon-size;
      vertical-align: middle;
    }
  }
}

.mat-mdc-nav-list.mat-mdc-list-base {
  &.uxg-link-list {
    .mat-mdc-list-item {
      height: $uxg-link-list-item-height;

      .mat-icon:first-of-type {
        margin-right: 8px;
      }

      .mdc-list-item__content {
        padding: 0 $uxg-spacing-3;

        .mat-icon {
          width: $uxg-link-list-icon-size;
          height: $uxg-link-list-icon-size;
          font-size: $uxg-link-list-icon-size;
        }
      }
    }
  }

  &.uxg-nav-list,
  &.uxg-nav-list-level {
    & > .mat-mdc-list-item {
      box-sizing: border-box;
      border-left-width: 11px;
      border-left-style: solid;

      .mat-icon:first-of-type {
        margin-right: 14px;
        @include color.color(on-surface-medium);
      }

      &:last-of-type {
        margin-bottom: 30px;
      }

      .mat-mdc-list-item-content {
        .mat-icon:nth-last-child(1) {
          position: absolute;
          right: 20px;
        }
      }
    }
  }
}

.mat-mdc-list-base {
  .mat-mdc-list-divider {
    margin: 0 10px;
  }
}