@use '@finastra/fds-theme/color' as color;
@use '@finastra/fds-theme/typography' as typography;

@mixin theme($theme: null) {
  .uxg-ol {
    *::before {
      @include color.color(surface);
      @include color.property(background-color, primary);
    }
  }

  .mat-mdc-list-base.mat-mdc-nav-list {
    padding: 0;

    &.uxg-link-list {
      .mat-mdc-list-item .mdc-list-item__primary-text {
        @include color.color(primary);

        display: flex;
        align-items: center;
      }
    }

    &.uxg-nav-list,
    &.uxg-nav-list-level {
      .mat-mdc-list-item {
        border-left-color: transparent;
        border-radius: unset;

        &:hover {
          @include color.property(border-color, outline-info);
        }

        .mat-icon {
          @include color.color(on-surface-medium);
          opacity: 0.25;
        }

        .mat-ripple-element {
          @include color.property(background-color, primary);
          opacity: 0.1;
        }

        &.uxg-list-item-selected {
          @include color.property(border-color, primary);

          .mat-icon {
            @include color.color(primary);
            opacity: 0.5;
          }

          .mdc-list-item__primary-text {
            @include color.color(primary);
          }
        }

        .mat-mdc-list-item-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
}

@mixin typography($config: null) {
  .uxg-nav-list.mat-mdc-nav-list.mat-mdc-list-base {
    & .mat-mdc-list-item .mdc-list-item__primary-text {
      @include typography.typography(subtitle-1);
    }
  }

  .uxg-link-list.mat-mdc-nav-list.mat-mdc-list-base {
    & .mat-mdc-list-item .mdc-list-item__primary-text {
      @include typography.typography(caption);
    }
  }

  .uxg-ol {
    *::before {
      @include typography.typography(subtitle-1);
    }

    .uxg-ol-title {
      @include typography.typography(subtitle-1);
    }
  }
}