.wp-block-memberpress-pro-profile-menu {
display: inline-block;
border-radius: 0.375rem;
}
.is-layout-flex > .wp-block-memberpress-pro-profile-menu {
margin-left: auto;
}
.wp-block-memberpress-pro-profile-menu__button-group {
position: relative;
}
.wp-block-memberpress-pro-profile-menu__button {
background: transparent;
display: none;
padding: 0.5rem;
border: 0;
border-radius: 0.375rem;
cursor: pointer;
align-items: center;
outline: 0;
color: inherit;
position: relative;
overflow: hidden;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: currentColor;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
&:hover::before,
&:focus::before {
opacity: 0.1;
}
&:focus,
&:active {
outline: 0;
}
}
.wp-block-memberpress-pro-profile-menu__avatar {
width: 40px;
height: 40px;
border-radius: 9999px;
margin-right: 0.75rem;
object-fit: cover;
}
.wp-block-memberpress-pro-profile-menu__text {
font-size: 16px;
color: inherit;
display: block;
text-align: left;
margin-right: 1rem;
}
.wp-block-memberpress-pro-profile-menu__text--small {
display: block;
font-size: 12px;
opacity: 0.7;
margin-top: 0px;
color: inherit;
}
.wp-block-memberpress-pro-profile-menu__arrow-down {
width: 1.5rem;
height: 1.5rem;
transition: transform 0.2s ease;
color: inherit;
;
}
.wp-block-memberpress-pro-profile-menu__button[aria-expanded="true"] .wp-block-memberpress-pro-profile-menu__arrow-down {
transform: rotate(180deg);
}
.wp-block-memberpress-pro-profile-menu__hamburger {
width: 1.5rem;
height: 1.5rem;
color: inherit;
stroke: currentColor;
} .wp-block-memberpress-pro-profile-menu__dropdown {
position: absolute;
z-index: 1000;
transform: translate3d(0px, 58px, 0px);
top: 0px;
right: 0;
left: auto;
will-change: transform;
float: left;
min-width: 12rem;
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.375rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.wp-block-memberpress-pro-profile-menu__dropdown-item,
.wp-block-memberpress-pro-profile-menu__dropdown a {
display: block;
padding: 0.5rem 1.5rem;
clear: both;
font-weight: 400;
color: inherit;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
text-decoration: none;
transition: background-color 0.15s ease-in-out;
}
.wp-block-memberpress-pro-profile-menu__dropdown-item:hover,
.wp-block-memberpress-pro-profile-menu__dropdown-item:focus,
.wp-block-memberpress-pro-profile-menu__dropdown a:hover,
.wp-block-memberpress-pro-profile-menu__dropdown a:focus {
color: inherit;
text-decoration: none;
background-color: #f8f9fa;
} @media (max-width: 839px) {
.wp-block-memberpress-pro-profile-menu__button.--is-mobile {
display: block;
}
.wp-block-memberpress-pro-profile-menu__text {
display: none;
}
.wp-block-memberpress-pro-profile-menu__dropdown {
right: 0;
left: auto;
min-width: 10rem;
}
}
@media (min-width: 840px) {
.wp-block-memberpress-pro-profile-menu__button.--is-tablet {
display: flex;
align-items: center;
}
.wp-block-memberpress-pro-profile-menu__button.--is-mobile {
display: none;
}
} .rtl .wp-block-memberpress-pro-profile-menu__dropdown {
right: auto;
left: 0;
text-align: right;
}
.rtl .wp-block-memberpress-pro-profile-menu__text {
text-align: right;
}
.rtl .wp-block-memberpress-pro-profile-menu__avatar {
margin-right: 0;
margin-left: 0.75rem;
} .wp-block-memberpress-pro-profile-menu__dropdown {
background-color: var(--mp-dropdown-bg, #ffffff);
color: var(--mp-dropdown-text, #212529);
}
.wp-block-memberpress-pro-profile-menu__dropdown-item,
.wp-block-memberpress-pro-profile-menu__dropdown a,
.wp-block-memberpress-pro-profile-menu__dropdown.wp-block-memberpress-pro-profile-menu__dropdown a {
color: var(--mp-dropdown-text, #212529);
position: relative;
isolation: isolate;
}
.wp-block-memberpress-pro-profile-menu__dropdown-item::before,
.wp-block-memberpress-pro-profile-menu__dropdown a::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: currentColor;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
z-index: -1;
}
.wp-block-memberpress-pro-profile-menu__dropdown-item:hover::before,
.wp-block-memberpress-pro-profile-menu__dropdown-item:focus::before,
.wp-block-memberpress-pro-profile-menu__dropdown a:hover::before,
.wp-block-memberpress-pro-profile-menu__dropdown a:focus::before {
opacity: 0.08;
}
.wp-block-memberpress-pro-profile-menu__dropdown-item:hover,
.wp-block-memberpress-pro-profile-menu__dropdown a:hover {
background-color: transparent;
text-decoration: none;
filter: none;
}