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

/* Break out mixin
 *
 * Allows to break out of deeply nested selectors
 * and prepend directionality attribute to the outermost selector.
 * Works for coma separated selector list as well.
 */
@mixin break-out($selectors, $dir: 'ltr') {
    @at-root #{prependDir($selectors, $dir)} {
        @content;
    }
}

@function prependDir($selectors, $dir) {
    $selectorsWithDir: null;
    @each $selector in $selectors {
        $selectorsWithDir: append($selectorsWithDir, '[dir="#{$dir}"]#{$selector}', 'comma');
    }
    @return $selectorsWithDir;
}

:host {
    display: block;
    @include type-style(comparison-table);

    // DESKTOP / TABLET STYLING
    ::ng-deep .nx-comparison-table__row {
        display: flex;

        .nx-comparison-table__popular-cell {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .nx-comparison-table__popular-cell .nx-comparison-table__cell-content {
            @include type-style(comparison-table-popular-cell);
            background-color: v(comparison-table-popular-cell-background-color);
            color: v(comparison-table-popular-cell-text-color);
            width: 100%;
            padding: nx-spacer(2xs) nx-spacer(xs);

            @include break-out(&, 'ltr') {
                margin-right: 1px;
            }

            @include break-out(&, 'rtl') {
                margin-left: 1px;
            }
        }

        .nx-comparison-table__description-cell,
        .nx-comparison-table__popular-cell {
            font-weight: nx-font-weight(semibold);
            width: 0;

            @include break-out(&, 'ltr') {
                text-align: left;
            }

            @include break-out(&, 'rtl') {
                text-align: right;
            }
        }

        .nx-comparison-table__cell,
        .nx-comparison-table__intersection-cell,
        .nx-comparison-table__placeholder-cell {
            text-align: center;
            width: 0;
        }

        .nx-comparison-table__cell,
        .nx-comparison-table__description-cell,
        .nx-comparison-table__popular-cell,
        .nx-comparison-table__intersection-cell,
        .nx-comparison-table__placeholder-cell {
            flex: 1 1 auto;

            // flex-grow for intersection-cells is set with js
        }

        .nx-comparison-table__intersection-cell,
        .nx-comparison-table__description-cell,
        .nx-comparison-table__cell {
            .nx-comparison-table__cell-content {
                padding: 16px;
                height: 100%;
                background-color: v(comparison-table-cell-background-color);
            }
        }

        .nx-comparison-table__placeholder-cell {
            .nx-comparison-table__cell-content {
                height: 100%;
            }
        }

        .nx-comparison-table__cell.is-selected .nx-comparison-table__cell-content {
            background-color: v(comparison-table-selected-column-background-color);
        }

        // DESKTOP  +  TABLET disabled styles
        .nx-comparison-table__cell.is-disabled {
            color: v(comparison-table-disabled-text-color);

            ::ng-deep nx-icon:not(.nx-comparison-table__select-button) {
                opacity: 40%;
            }
        }
    }

    ::ng-deep .nx-comparison-table-toggle-section__header-content {
        @include break-out(&, 'ltr') {
            padding: v(comparison-table-toggle-section-header-padding);
        }

        @include break-out(&, 'rtl') {
            padding: v(comparison-table-toggle-section-header-padding-rtl);
        }
    }

    .nx-comparison-table__toggle-section-body {
        overflow-y: hidden;
    }

    ::ng-deep nx-comparison-table-flex-row.is-header-row,
    ::ng-deep nx-comparison-table-flex-row.is-footer-row {
        .nx-comparison-table__cell .nx-comparison-table__cell-content {
            padding: 16px 4px;
            background-color: v(comparison-table-header-background-color);
        }

        .nx-comparison-table__row:last-child .nx-comparison-table__placeholder-cell .nx-comparison-table__cell-content {
            background-color: v(comparison-table-placeholder-cell-background-color);
            border-bottom: 1px solid v(comparison-table-placeholder-cell-border-color);
            border-top: 1px solid v(comparison-table-placeholder-cell-border-color);

            @include break-out(&, 'ltr') {
                border-left: 1px solid v(comparison-table-placeholder-cell-border-color);
            }

            @include break-out(&, 'rtl') {
                border-right: 1px solid v(comparison-table-placeholder-cell-border-color);
            }
        }

        .nx-comparison-table__cell:not(.is-selected) .nx-comparison-table__cell-content {
            color: v(comparison-table-header-text-color);
        }

        .nx-comparison-table__cell.is-disabled .nx-comparison-table__cell-content {
            color: v(comparison-table-disabled-column-header-text-color);
        }
    }

    ::ng-deep nx-comparison-table-flex-row.has-intersection {
        .nx-comparison-table__description-cell .nx-comparison-table__cell-content,
        .nx-comparison-table__intersection-cell .nx-comparison-table__cell-content {
            background: v(comparison-table-intersection-cell-background-color);
        }
    }

    // vertical borders between cells (on left side)
    ::ng-deep .nx-comparison-table__row {
        .nx-comparison-table__cell,
        .nx-comparison-table__description-cell,
        .nx-comparison-table__intersection-cell,
        .nx-comparison-table__placeholder-cell {
            .nx-comparison-table__cell-content {
                @include break-out(&, 'ltr') {
                    border-right: nx-border-size(xs) solid v(comparison-table-border-color);
                }

                @include break-out(&, 'rtl') {
                    border-left: nx-border-size(xs) solid v(comparison-table-border-color);
                }
            }
        }
    }

    // vertical border on right side
    ::ng-deep .nx-comparison-table__row {
        .nx-comparison-table__cell:first-child,
        .nx-comparison-table__description-cell {
            .nx-comparison-table__cell-content {
                @include break-out(&, 'ltr') {
                    border-left: nx-border-size(xs) solid v(comparison-table-border-color);
                }

                @include break-out(&, 'rtl') {
                    border-right: nx-border-size(xs) solid v(comparison-table-border-color);
                }
            }
        }
    }

    // horizontal borders
    ::ng-deep nx-comparison-table-flex-row.is-header-row,
    ::ng-deep nx-comparison-table-flex-row.is-footer-row {
        .nx-comparison-table__cell .nx-comparison-table__cell-content {
            border-top: nx-border-size(xs) solid v(comparison-table-border-color);
            border-bottom: nx-border-size(xs) solid v(comparison-table-border-color);
        }
    }

    // horizontal border on all content rows
    ::ng-deep nx-comparison-table-flex-row.is-content-row {
        .nx-comparison-table__cell,
        .nx-comparison-table__description-cell,
        .nx-comparison-table__intersection-cell {
            .nx-comparison-table__cell-content {
                border-bottom: nx-border-size(xs) solid v(comparison-table-border-color);
            }
        }
    }

    ::ng-deep nx-comparison-table-desktop-group {
        // bottom border for group-expansion cell
        .nx-comparison-table__group-expansion-cell {
            border-bottom: nx-border-size(xs) solid v(comparison-table-border-color);
        }

        // border-left if expansion cell uses full row of table
        .nx-comparison-table__group-expansion-cell.full-width {
            @include break-out(&, 'ltr') {
                border-left: nx-border-size(xs) solid v(comparison-table-border-color);
            }

            @include break-out(&, 'rtl') {
                border-right: nx-border-size(xs) solid v(comparison-table-border-color);
            }
        }
    }

    // no borders for popular cell row placeholder cells
    ::ng-deep .nx-comparison-table__row .nx-comparison-table__placeholder-cell.is-popular-placeholder-cell .nx-comparison-table__cell-content {
        @include break-out(&, 'ltr') {
            border-right: none;
        }

        @include break-out(&, 'rtl') {
            border-left: none;
        }
    }

    // horizontal border on the first row of each block
    ::ng-deep nx-comparison-table-flex-row.is-header-row,
    ::ng-deep .nx-comparison-table__table-body > nx-comparison-table-flex-row:first-child,
    ::ng-deep .nx-comparison-table__toggle-section + nx-comparison-table-flex-row,
    ::ng-deep .nx-comparison-table__table-body > nx-comparison-table-desktop-group:first-child nx-comparison-table-flex-row:first-child,
    ::ng-deep .nx-comparison-table__toggle-section + nx-comparison-table-desktop-group nx-comparison-table-flex-row:first-child {
        .nx-comparison-table__description-cell {
            .nx-comparison-table__cell-content {
                border-top: nx-border-size(xs) solid v(comparison-table-border-color);
            }
        }

        @include media-breakpoint-up(large) {
            .nx-comparison-table__cell,
            .nx-comparison-table__intersection-cell {
                .nx-comparison-table__cell-content {
                    border-top: nx-border-size(xs) solid v(comparison-table-border-color);
                }
            }
        }
    }

    @include media-breakpoint-down(medium) {
        ::ng-deep nx-comparison-table-flex-row,
        ::ng-deep nx-comparison-table-desktop-group {
            .nx-comparison-table__intersection-cell {
                .nx-comparison-table__cell-content {
                    @include break-out(&, 'ltr') {
                        border-left: nx-border-size(xs) solid v(comparison-table-border-color);
                    }

                    @include break-out(&, 'rtl') {
                        border-right: nx-border-size(xs) solid v(comparison-table-border-color);
                    }
                }
            }
        }
    }

    // display a margin on the bottom of the header row
    ::ng-deep nx-comparison-table-flex-row.is-header-row {
        margin-bottom: 8px;
    }

    // display a margin on top of several elements
    ::ng-deep nx-comparison-table-flex-row.is-footer-row,
    ::ng-deep nx-comparison-table-flex-row + .nx-comparison-table__toggle-section,
    ::ng-deep nx-comparison-table-desktop-group + .nx-comparison-table__toggle-section,
    ::ng-deep .nx-comparison-table__toggle-section + .nx-comparison-table__toggle-section,
    ::ng-deep .nx-comparison-table__toggle-section + nx-comparison-table-flex-row,
    ::ng-deep .nx-comparison-table__toggle-section + nx-comparison-table-desktop-group,
    ::ng-deep nx-comparison-table-desktop-group + nx-comparison-table-desktop-group {
        margin-top: 16px;
    }

    // MOBILE STYLING
    @include media-breakpoint-down(small) {
        &:has(.nx-comparison-table__mobile-view) {
            overflow-x: scroll;
        }
    }

    ::ng-deep table {
        border-collapse: separate;
        border-spacing: 0;

        .nx-comparison-table__intersection-cell,
        .nx-comparison-table__cell,
        .nx-comparison-table__description-cell,
        .nx-comparison-table__mobile-header-cell {
            text-align: center;
            border-top: nx-border-size(xs) solid v(comparison-table-border-color);
            vertical-align: top;

            @include break-out(&, 'ltr') {
                border-left: nx-border-size(xs) solid v(comparison-table-border-color);
            }

            @include break-out(&, 'rtl') {
                border-right: nx-border-size(xs) solid v(comparison-table-border-color);
            }
        }

        .nx-comparison-table__intersection-cell,
        .nx-comparison-table__cell,
        .nx-comparison-table__description-cell {
            padding: 8px;
            background-color: v(comparison-table-cell-background-color);
        }

        .nx-comparison-table__mobile-popular-cell {
            @include type-style(comparison-table-popular-cell);
            background-color: v(comparison-table-popular-cell-background-color);
            color: v(comparison-table-popular-cell-text-color);
            padding: 4px;
        }

        .nx-comparison-table__mobile-header-cell {
            padding: 8px 4px;

            &:not(.is-selected) {
                background-color: v(comparison-table-header-background-color);
                color: v(comparison-table-header-text-color);
            }

            &.is-disabled {
                color: v(comparison-table-disabled-column-header-text-color);
            }
        }

        .nx-comparison-table__mobile-popular-cell,
        .nx-comparison-table__placeholder-with-border-cell {
            border-top: nx-border-size(xs) solid v(comparison-table-border-color);
        }

        .nx-comparison-table__intersection-cell-marker {
            display: none;
        }

        .nx-comparison-table__intersection-cell-marker + .nx-comparison-table__placeholder-with-border-cell {
            @include break-out(&, 'ltr') {
                border-left: nx-border-size(xs) solid v(comparison-table-border-color);
            }

            @include break-out(&, 'rtl') {
                border-right: nx-border-size(xs) solid v(comparison-table-border-color);
            }
        }

        tr:last-child {
            .nx-comparison-table__cell,
            .nx-comparison-table__description-cell,
            .nx-comparison-table__mobile-header-cell {
                border-bottom: nx-border-size(xs) solid v(comparison-table-border-color);
            }
        }

        .nx-comparison-table__intersection-cell {
            border-bottom: nx-border-size(xs) solid v(comparison-table-border-color);
        }

        .nx-comparison-table__mobile-header-cell {
            @include break-out(&, 'ltr') {
                border-right: nx-border-size(xs) solid v(comparison-table-border-color);
            }

            @include break-out(&, 'rtl') {
                border-left: nx-border-size(xs) solid v(comparison-table-border-color);
            }
        }

        tr th:last-child,
        tr td:last-child:not(.nx-comparison-table__placeholder-with-border-cell) {
            @include break-out(&, 'ltr') {
                border-right: nx-border-size(xs) solid v(comparison-table-border-color);
            }

            @include break-out(&, 'rtl') {
                border-left: nx-border-size(xs) solid v(comparison-table-border-color);
            }
        }

        .nx-comparison-table__intersection-cell {
            min-width: 256px;
            width: 256px;
            background: v(comparison-table-intersection-cell-background-color);
        }

        .nx-comparison-table__description-cell.is-intersection-column {
            background: v(comparison-table-intersection-cell-background-color);
        }

        .nx-comparison-table__description-cell {
            @include type-style(comparison-table-description-cell-mobile);
        }

        .nx-comparison-table__cell,
        .nx-comparison-table__description-cell,
        .nx-comparison-table__mobile-header-cell {
            width: 128px;
            min-width: 128px;
        }

        .nx-comparison-table__placeholder-cell {
            padding: 0;
            border: none;
            min-width: 4px;
        }

        .nx-comparison-table__mobile-toggle-section-header {
            @include break-out(&, 'ltr') {
                text-align: left;
                border-left: nx-border-size(xs) solid v(comparison-table-border-color);
            }

            @include break-out(&, 'rtl') {
                text-align: right;
                border-right: nx-border-size(xs) solid v(comparison-table-border-color);
            }
        }

        // border for placeholder cells after certain cell types
        .nx-comparison-table__mobile-toggle-section-header + .nx-comparison-table__placeholder-cell,
        .nx-comparison-table__description-cell + .nx-comparison-table__placeholder-cell,
        .nx-comparison-table__cell + .nx-comparison-table__placeholder-cell {
            @include break-out(&, 'ltr') {
                border-left: nx-border-size(xs) solid v(comparison-table-border-color);
            }

            @include break-out(&, 'rtl') {
                border-right: nx-border-size(xs) solid v(comparison-table-border-color);
            }
        }

        .nx-comparison-table__description-cell + .nx-comparison-table__placeholder-cell {
            min-width: 8px;
        }

        // Sticky behaviour
        tr th:first-child,
        tr td:first-child {
            position: sticky;
            z-index: 1;

            @include break-out(&, 'ltr') {
                left: 0;
            }

            @include break-out(&, 'rtl') {
                right: 0;
            }
        }

        // MOBILE disabled styles
        tr.is-disabled {
            ::ng-deep .nx-comparison-table__mobile-header-cell,
            ::ng-deep .nx-comparison-table__cell {
                color: v(comparison-table-disabled-text-color);

                ::ng-deep nx-icon:not(.nx-comparison-table__select-button) {
                    opacity: 40%;
                }
            }
        }
    }

    // remove margins from some components that are placed inside table cells
    ::ng-deep .nx-comparison-table__intersection-cell,
    ::ng-deep .nx-comparison-table__cell,
    ::ng-deep .nx-comparison-table__description-cell,
    ::ng-deep .nx-comparison-table__mobile-header-cell {
        nx-checkbox {
            margin: 0;

            .nx-checkbox__label {
                padding: 0;
            }
        }

        .nx-button {
            margin: 0;
        }

        nx-formfield .nx-formfield__wrapper {
            padding-bottom: 0;
        }

        nx-formfield.has-outline .nx-formfield__wrapper {
            padding-top: 0;
        }

        .nx-list {
            margin: 0;

            li:last-child {
                margin-bottom: 0;
            }
        }

        // fix alignment on IE
        nx-link a {
            display: inline-flex;
        }
    }
}

::ng-deep .nx-comparison-table-toggle-section__header-wrapper.cdk-keyboard-focused {
    .nx-comparison-table-toggle-section__header-content {
        @include focus-style;
        z-index: 1; // otherwise the bottom border is covered by the next row
        position: relative; // needed that z-index works
    }
}

@media screen and (forced-colors: active) {
    ::ng-deep .nx-comparison-table__popular-cell,
    ::ng-deep .nx-comparison-table__mobile-popular-cell {
        border-top: 1px solid CanvasText;
        border-right: 1px solid CanvasText;
        border-left: 1px solid CanvasText;
    }
}
