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

:host {
    display: block;
}

:host(.nx-expansion-panel--negative) ::ng-deep {
    div.nx-expansion-panel__body * {
        color: v(negative);
    }
}

.nx-expansion-panel__content {
    overflow: hidden;
    display: block;
}

.nx-expansion-panel__body {
    padding: v(accordion-regular-body-padding);

    &.flush-alignment {
        padding-left: 0;
        padding-right: 0;
    }
    @include type-style(accordion-body);

    @include media-breakpoint-down(small) {
        padding: v(accordion-regular-mobile-body-padding);
    }
}

:host(.nx-expansion-panel--regular) {
    &:not(:first-child) {
        margin-top: v(accordion-regular-header-top-margin);
    }

    ::ng-deep .nx-expansion-panel__header-content {
        box-shadow: inset 0 1px 0 0 v(accordion-regular-border-color);
    }

    &:last-child,
    &:only-child {
        box-shadow: 0 1px 0 0 v(accordion-regular-border-color);
    }

    @include media-breakpoint-down(small) {
        &:not(:first-child) {
            margin-top: 0;
        }

        ::ng-deep .nx-expansion-panel__header-content {
            box-shadow: inset 0 1px 0 0 v(accordion-regular-mobile-border-color);
        }

        &:last-child,
        &:only-child {
            ::ng-deep .nx-expansion-panel__header-content {
                box-shadow:
                    inset 0 1px 0 0 v(accordion-regular-mobile-border-color),
                    inset 0 -1px 0 0 v(accordion-regular-mobile-separator-color);
            }
        }

        &.nx-expanded ::ng-deep .nx-expansion-panel__header-content {
            box-shadow:
                inset 0 1px 0 0 v(accordion-regular-mobile-border-color),
                inset 0 -1px 0 0 v(accordion-regular-mobile-separator-color);
        }
    }
}

// Styles of the light version
:host(.nx-expansion-panel--light) {
    .nx-expansion-panel__body {
        padding: v(accordion-light-body-padding);

        &.flush-alignment {
            padding-left: 0;
            padding-right: 0;
        }

        @include media-breakpoint-down(small) {
            padding: v(accordion-light-mobile-body-padding);
        }
    }
}

:host(.nx-expansion-panel--light):not(.nx-expansion-panel--negative) {
    ::ng-deep .nx-expansion-panel__header-content {
        box-shadow: inset 0 1px 0 0 v(accordion-light-border-color);
    }

    &:last-child,
    &:only-child {
        box-shadow: 0 1px 0 0 v(accordion-light-border-color);
    }
}

// negative styles
:host(.nx-expansion-panel--regular.nx-expansion-panel--negative) {
    @include media-breakpoint-down(small) {
        ::ng-deep .nx-expansion-panel__header-content {
            box-shadow: inset 0 1px 0 0 v(negative-01);
        }

        &:last-child,
        &:only-child {
            ::ng-deep .nx-expansion-panel__header-content {
                box-shadow:
                    inset 0 1px 0 0 v(negative-01),
                    inset 0 -1px 0 0 v(negative-01);
            }
        }

        &.nx-expanded ::ng-deep .nx-expansion-panel__header-content {
            box-shadow:
                inset 0 1px 0 0 v(negative-01),
                inset 0 -1px 0 0 v(negative-01);
        }
    }
}

:host(.nx-expansion-panel--light.nx-expansion-panel--negative) {
    color: v(negative);

    ::ng-deep .nx-expansion-panel__header-content {
        box-shadow: inset 0 1px 0 0 v(negative);
    }

    &:last-child,
    &:only-child {
        box-shadow: 0 1px 0 0 v(negative);
    }
}

:host(.nx-expansion-panel--extra-light) {
    &:not(:first-child) {
        margin-top: v(accordion-extra-light-header-top-margin);
    }

    .nx-expansion-panel__body {
        padding: v(accordion-extra-light-body-padding);
    }
}

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

        ::ng-deep .nx-expansion-panel__header-content {
            color: buttonText;
        }

        &.nx-expansion-panel--regular ::ng-deep .nx-expansion-panel__header-content {
            border: nx-border-size(xs) solid buttonText;
        }

        &.is-disabled ::ng-deep .nx-expansion-panel__header-content {
            border-color: GrayText;
        }

        &.nx-expansion-panel--light.nx-expansion-panel--negative,
        &.nx-expansion-panel--light:not(.nx-expansion-panel--negative) {
            ::ng-deep .nx-expansion-panel__header-content {
                box-shadow: inset 0 1px 0 0 CanvasText;
            }

            &:last-child,
            &:only-child {
                box-shadow: 0 1px 0 0 CanvasText; // IE11
                border-bottom: 1px solid CanvasText; // Chromium Edge
            }
        }
    }
}
