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

$dot-size: nx-spacer(s);
$dot-border-size: nx-border-size(m);

// the heights of the dotted line between the elements
$label-line-height: nx-line-height(2xs);
$vertical-line-height: nx-spacer(s);

:host {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-bottom: nx-spacer(2xs);
    cursor: pointer;
    max-width: 100%;

    &:focus {
        outline: none;
    }

    &.cdk-keyboard-focused {
        .dot {
            @include focus-style;
        }
    }

    @media screen and (forced-colors: active) {
        .dot {
            border-color: buttonText;
        }

        .small-dot {
            background-color: buttonText;
        }
    }

    &.is-disabled {
        cursor: not-allowed;

        .dot {
            border-color: v(multi-stepper-dot-disabled-color);
        }

        @media screen and (forced-colors: active) {
            .label {
                color: GrayText;
            }

            .dot {
                border-color: GrayText;
            }
        }
    }

    &.is-completed:not(.is-disabled):not(.is-selected) {
        .dot {
            background-color: v(multi-stepper-dot-touched-color);
        }
    }

    &.nx-multi-step-item--vertical {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;

        .label-box {
            display: flex;
            align-items: center;
        }

        .label {
            position: static;
            transform: none;
            margin-left: nx-spacer(s);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: left;
            min-width: 0;
            @include type-style(multi-stepper-step);

            [dir='rtl'] & {
                margin-right: nx-spacer(s);
                margin-left: initial;
            }

            // This creates a hidden label with bold text, so the label will not jump when it's beeing hovered.
            &:before {
                content: attr(label);
                height: 0;
                overflow: hidden;
                display: block;
            }

            @media screen and (forced-colors: active) {
                forced-colors-adjust: none;
                background-color: buttonFace;
                border-radius: 4px;
                box-shadow: 0 0 0 2px buttonFace;
                color: buttonText;
            }
        }

        &.is-disabled .label {
            color: v(multi-stepper-step-disabled-color);

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

        &.is-selected .label {
            // still not themed because vertical and horizontal differ (horizontal does not get bold)
            font-weight: nx-font-weight(bold);

            @media screen and (forced-colors: active) {
                background-color: highlight;
                border-radius: 4px;
                box-shadow: 0 0 0 2px highlight;
                color: highlightText;
                forced-color-adjust: none;
            }
        }

        .line {
            border-top: 0;
            border-left-width: nx-border-size(xl);
            border-left-style: dotted;
            border-left-color: v(multi-stepper-line-color);
            height: $vertical-line-height;
            flex: 0 0 auto;
            margin-left: (($dot-size - nx-border-size(xl)) * 0.5);

            [dir='rtl'] & {
                border-right-width: nx-border-size(xl);
                border-right-style: dotted;
                border-right-color: v(multi-stepper-line-color);
                margin-right: (($dot-size - nx-border-size(xl)) * 0.5);
                margin-left: initial;
                border-left: none;
            }
        }

        &.is-active .line {
            $offset: (($label-line-height - $dot-size) * 0.5) + 1px; // 1px is to visually close the tiny gap to the dot
            border-left-style: solid;
            border-left-color: v(multi-stepper-line-filled-color);
            margin-top: -$offset;
            margin-bottom: -$offset;
            height: $vertical-line-height + $offset * 2;

            [dir='rtl'] & {
                border-right-style: solid;
                border-right-color: v(multi-stepper-line-filled-color);
                border-left: none;
            }

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

        &.is-last {
            flex: 0 0 auto;
        }
    }

    &:not(.nx-multi-step-item--vertical) {
        .line {
            border-top-width: nx-border-size(xl);
            border-top-style: dotted;
            border-top-color: v(multi-stepper-line-color);
            margin: 0 nx-spacer(3xs);
            position: absolute;
            left: calc(#{$dot-size} + #{nx-spacer(3xs)});
            width: calc(100% - (#{$dot-size} + (#{nx-spacer(3xs)} * 2)));
            transform: translateX(50%);
            top: calc(#{$dot-size} / 2 - #{nx-border-size(xl)} / 2);

            [dir='rtl'] & {
                right: calc(#{$dot-size} + #{nx-spacer(3xs)});
                left: auto;
                transform: translateX(-50%);
            }
        }

        &.is-active {
            .line {
                border-top-color: v(multi-stepper-line-filled-color);
                border-top-style: solid;
                margin: 0;
                left: calc(#{$dot-size} - 1px);
                width: calc(100% - (#{$dot-size} - 2px));

                [dir='rtl'] & {
                    right: calc(#{$dot-size} - 1px);
                    left: auto;
                }
            }
        }
    }

    &:not(:first-child)::before {
        content: '';
    }

    &.nx-multi-step-item--active {
        &::after {
            border-top-color: v(multi-stepper-line-filled-color);
            border-top-style: solid;
            border-image-source: none;
            transition: border-style 0.1s ease-in;
            margin: 0;
            left: calc(#{nx-spacer(3xs)} * 2);
            width: calc(100% - #{nx-spacer(3xs)});

            [dir='rtl'] & {
                right: calc(#{nx-spacer(3xs)} * 2);
                left: auto;
            }
        }
    }
}

.label-box {
    outline: none;
    appearance: none;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    max-width: 100%;
}

.label {
    position: absolute;
    top: calc(#{$dot-size * 0.5} + #{nx-spacer(s)});
    text-align: center;
    color: v(multi-stepper-step-color);
    left: 0;
    width: 100%;

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

.dot {
    width: $dot-size;
    height: $dot-size;
    border-width: $dot-border-size;
    border-style: solid;
    border-color: v(multi-stepper-dot-touched-color);
    color: v(multi-stepper-dot-checkmark-color);
    background: v(multi-stepper-dot-background-color);
    border-radius: 50%;
    flex: 0 0 auto;
    position: relative;

    nx-icon {
        font-size: nx-font-size(3xs);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        :host-context([dir='rtl']) & {
            right: 50%;
            left: auto;
            transform: translate(50%, -50%);
        }
    }
}

.small-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: nx-spacer(2xs);
    height: nx-spacer(2xs);
    border-radius: 50%;
    background-color: v(multi-stepper-dot-touched-color);

    :host-context([dir='rtl']) & {
        right: 50%;
        left: auto;
        transform: translate(50%, -50%);
    }

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