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

:host(.nx-menu) {
    display: block;
}

.nx-menu__wrapper {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    overflow: auto;
    background: v(menu-background-color);
}

::ng-deep .nx-menu__link {
    display: block;
    padding: nx-spacer(xs) 0;
    font-size: nx-font-size(2xs);
    line-height: nx-line-height(2xs);
    outline: none;

    + .nx-menu__link {
        margin-top: nx-spacer(2xs);
    }
}

::ng-deep .nx-menu__link.cdk-keyboard-focused {
    @include focus-style;
    border-radius: nx-border-radius(s);
    outline: none;
}

::ng-deep .nx-menu__item {
    &.nx-menu__item--small,
    &.nx-menu__item--large {
        padding: nx-spacer(m);
        border-bottom: nx-border-size(xs) solid v(menu-item-border-color);

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

    &.nx-menu__item--large {
        padding-left: nx-spacer(xl);

        :host-context([dir='rtl']) & {
            padding-right: nx-spacer(xl);
            padding-left: initial;
        }
    }
}

@media screen and (forced-colors: active) {
    ::ng-deep .nx-menu__link {
        text-decoration: none;
    }
}
