.ez-main-nav {
    .ez-user-menu {
        position: relative;
        cursor: pointer;
        z-index: 1050;

        &__name-wrapper {
            display: flex;
            height: calculateRem(58px);
            width: calculateRem(200px);
            padding: calculateRem(8px) calculateRem(24px) calculateRem(8px) calculateRem(34px);
            user-select: none;
            transition: all $ibexa-admin-transition;

            &:before {
                content: '';
                position: absolute;
                top: 50%;
                right: calculateRem(11px);
                width: 0;
                height: 0;
                border-left: calculateRem(5px) solid transparent;
                border-right: calculateRem(5px) solid transparent;
                border-top: calculateRem(5px) solid $ibexa-color-base-dark;
            }

            &--active {
                background-color: $ibexa-white;
                box-shadow: 0 calculateRem(2px) calculateRem(6px) rgba(0, 0, 0, 0.15);

                &:before {
                    transform: rotate(180deg);
                }
            }

            transition: background-color 0.3s $ibexa-admin-transition;
        }

        &__name {
            display: flex;
            align-items: center;
            text-align: right;
            font-size: calculateRem(14px);
        }

        &__items {
            width: 100%;
            display: block;
            position: absolute;
            padding-top: calculateRem(6px);
            right: 0;
            background-color: $ibexa-white;
            box-shadow: 0 calculateRem(5px) calculateRem(6px) rgba(0, 0, 0, 0.15);
            transform-origin: top center;
            white-space: nowrap;

            &--hidden {
                padding-top: 0;
                height: 0;
                overflow: hidden;
            }
        }

        &__item {
            width: 100%;
            padding-left: calculateRem(28px);
            padding-right: calculateRem(28px);
            cursor: pointer;
            font-size: calculateRem(14px);
            color: $ibexa-color-font;

            &--dark {
                .nav-link {
                    color: $ibexa-color-font;
                    text-decoration: none;
                }
            }

            .nav-link {
                white-space: normal;
                word-break: break-word;
            }

            &:first-child {
                padding-top: calculateRem(10px);
            }

            &:last-child {
                margin: calculateRem(24px) auto calculateRem(16px) 0;
            }

            &:hover {
                .nav-link {
                    color: $ibexa-color-primary;
                }
            }
        }

        &__item-label {
            grid-area: label;
            white-space: normal;
            word-break: break-word;
        }
    }
}
