@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);
    }
}
