@import '../shared-styles/index';

$dot-size: nx-spacer(2xs);
$dot-border-radius: 50%;

:host {
  color: v(list-text-color);
  list-style: none;
  padding: 0;
  counter-reset: list;
}

:host(.nx-list--normal) {
  @include type-style(paragraph-02);
}

:host(.nx-list--small) {
  @include type-style(paragraph-03);
}

:host(.nx-list--xsmall) {
  @include type-style(paragraph-04);
  font-weight: 400;
}

// Inverting the color is enough for most states,
// we only have to take extra care of the ordered-circle variant
:host(.nx-list--negative) {
  color: v(negative);

  ::ng-deep .nx-list__icon {
    color: v(negative);
  }
}

:host ::ng-deep {
  .nx-list__icon {
    position: absolute;
    left: 0;
    font-size: v(list-icon-size);
    color: v(list-icon-color);
    top: calc((#{v(paragraph-02-line-height)} - #{v(list-icon-size)}) / 2);
    line-height: v(list-icon-size);
    height: v(list-icon-size);

    [dir='rtl'] & {
      right: 0;
      left: auto;
    }
  }
}

:host(ul.nx-list--small) ::ng-deep li {
  .nx-list__icon {
    top: calc((#{v(paragraph-03-line-height)} - #{v(list-icon-size)}) / 2);
  }
}

:host(ul.nx-list--xsmall) ::ng-deep li {
  .nx-list__icon {
    top: calc((#{v(paragraph-04-line-height)} - #{v(list-icon-size)}) / 2);
  }
}

// our .c-list__item's
:host ::ng-deep li {
  padding-left: calc(#{v(list-icon-size)} + #{nx-spacer(xs)});
  position: relative;

  [dir='rtl'] & {
    padding-right: calc(#{v(list-icon-size)} + #{nx-spacer(xs)});
    padding-left: initial;
  }
}

// Item spacing
::ng-deep li:not(:last-child) {
  :host(.nx-list--xsmall) & {
    margin-bottom: v(list-xsmall-item-spacing);
  }
  :host(.nx-list--small) & {
    margin-bottom: v(list-small-item-spacing);
  }

  :host(.nx-list--normal) & {
    margin-bottom: v(list-normal-item-spacing);
  }

  :host(.nx-list--xsmall-condensed) & {
    margin-bottom: v(list-xsmall-condensed-item-spacing);
  }

  :host(.nx-list--small-condensed) & {
    margin-bottom: v(list-small-condensed-item-spacing);
  }

  :host(.nx-list--normal-condensed) & {
    margin-bottom: v(list-normal-condensed-item-spacing);
  }
}

// apply the default dot for unordered (ul) lists, always exclude items with icons
:host(ul) ::ng-deep > li:not(.nx-list__icon-wrapper) {
  &:before {
    background-color: v(list-icon-color);
    border-radius: $dot-border-radius;
    content: '';
    display: inline-block;
    height: $dot-size;
    width: $dot-size;
    margin-right: nx-spacer(s);
    position: absolute;
    margin-left: calc(-1 * #{v(list-icon-size)});
    margin-top: calc((#{v(paragraph-02-line-height)} - #{$dot-size}) / 2);
    transform: translateX(-50%);

    [dir='rtl'] & {
      margin-right: calc(-1 * #{v(list-icon-size)});
      margin-left: nx-spacer(s);
      transform: translateX(50%);
    }

    @media screen and (forced-colors: active) {
      background-color: CanvasText !important;
    }
  }
}

:host(ul.nx-list--small) ::ng-deep > li:not(.nx-list__icon-wrapper):before {
  margin-top: calc((#{v(paragraph-03-line-height)} - #{$dot-size}) / 2);
}

:host(ul.nx-list--xsmall) ::ng-deep > li:not(.nx-list__icon-wrapper):before {
  margin-top: calc((#{v(paragraph-04-line-height)} - #{$dot-size}) / 2);
}

// ordered lists (ol) have no dot but the counter, always exclude items with icons
:host(ol) ::ng-deep > li:not(.nx-list__icon-wrapper) {
  &:before {
    counter-increment: list;
    content: counter(list);
    position: absolute;
    font-size: inherit;
    font-weight: bold;
    display: inline-block;
    width: v(list-icon-size);
    text-align: center;
    left: 0;

    [dir='rtl'] & {
      right: 0;
      left: auto;
    }
  }
}

:host ::ng-deep li > ::ng-deep ol,
:host ::ng-deep li > ::ng-deep ul {
  margin-bottom: nx-spacer(s);
  margin-top: nx-spacer(s);
}

// ordered lists (ol) with option `ordered-circle` have a counter with a circle around
:host(ol.nx-list--ordered-circle) ::ng-deep > li:not(.nx-list__icon-wrapper) {
  &:before {
    width: v(list-circle-size);
    @include type-style(paragraph-03);
    color: greenyellow;
    color: v(list-circle-text-color);
    left: 0;
    top: calc((#{v(paragraph-02-line-height)} - #{v(paragraph-03-line-height)}) / 2);
    z-index: 2;

    :host-context([dir='rtl']) & {
      right: 0;
      left: auto;
    }

    @media screen and (forced-colors: active) {
      border: nx-border-size(xs) solid CanvasText;
      border-radius: 50%;
    }
  }

  &:after {
    border-radius: $dot-border-radius;
    width: v(list-circle-size);
    height: v(list-circle-size);
    background-color: v(list-icon-color);
    left: 0;
    top: calc((#{v(paragraph-02-line-height)} - #{v(list-circle-size)}) / 2);
    content: '';
    position: absolute;

    [dir='rtl'] & {
      right: 0;
      left: auto;
    }

    @media screen and (forced-colors: active) {
      color: CanvasText;
    }
  }
}

:host(ol.nx-list--ordered-circle.nx-list--small) ::ng-deep > li:not(.nx-list__icon-wrapper) {
  &:before {
    top: calc((#{v(paragraph-03-line-height)} - #{v(paragraph-03-line-height)}) / 2);
  }

  &:after {
    top: calc((#{v(paragraph-03-line-height)} - #{v(list-circle-size)}) / 2);
  }
}

:host(ol.nx-list--ordered-circle.nx-list--xsmall) ::ng-deep > li:not(.nx-list__icon-wrapper) {
  &:before {
    top: calc((#{v(paragraph-04-line-height)} - #{v(paragraph-03-line-height)}) / 2);
  }

  &:after {
    top: calc((#{v(paragraph-04-line-height)} - #{v(list-circle-size)}) / 2);
  }
}

// take care of the circle when being inverted
:host(ol.nx-list--ordered-circle.nx-list--negative) {
  &::ng-deep > li:not(.nx-list__icon-wrapper):after {
    background-color: v(negative);
  }

  &::ng-deep > li:not(.nx-list__icon-wrapper):before {
    color: v(negative-background);
  }
}

:host(ul.nx-list--negative) ::ng-deep > li:not(.nx-list__icon-wrapper) {
  &:before {
    background-color: v(negative);
  }
}
