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

:host {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
    background: v(sidepanel-background-color);

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

    &.is-floating {
        z-index: 1;
        box-shadow: v(sidepanel-floating-shadow);
    }

    .is-closed {
        transform: translateX(100%);

        [dir='rtl'] & {
            transform: translateX(-100%);
        }
    }

    &.light {
        background: v(sidepanel-light-background-color);
        border-left: 1px solid v(sidepanel-light-border-color);

        [dir='rtl'] & {
            border-left: unset;
            border-right: 1px solid v(sidepanel-light-border-color);
        }
    }

    @media screen and (forced-colors: active) {
        border-left: 1px solid CanvasText;

        [dir='rtl'] & {
            border-left: none;
            border-right: 1px solid CanvasText;
        }
    }
}

// Deprecated: styles for a nx-sidepanel without a wrapping nx-sidepanel-outer-container.
// if no wrapper is used, the sidepanel currently is not animated when opening closing,
// since a controlled environment is needed so that the animation works as expected.
:host.without-wrapper {
    &.is-floating {
        position: fixed;
        right: 0;
        z-index: 1;
        box-shadow: v(sidepanel-floating-shadow);

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

    &.is-static {
        position: sticky;
        top: 0;
    }

    &.is-closed {
        display: none;
    }
}
