@import "popover-api";
// checkbox label
.#{$eps-prefix}popover {
padding: $eps-popover-padding-y 0;
background-color: var(--popover-background-color);
box-shadow: var(--popover-box-shadow-size) var(--popover-box-shadow-color);
list-style: none;
display: flex;
flex-direction: column;
min-width: 120px;
border-radius: $eps-popover-border-radius;
position: absolute;
z-index: $eps-zindex-popover;
margin-top: $eps-popover-arrow-height;
transform: translateX(-50%);
left: px-to-rem(4);
&__background {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: $eps-zindex-modal-backdrop;
}
&__container {
position: relative;
}
&::before {
content: "";
display: block;
position: absolute;
width: $eps-popover-arrow-width;
height: $eps-popover-arrow-height;
margin: 0 $eps-popover-border-radius $eps-popover-arrow-height;
top: -$eps-popover-arrow-height;
left: 50%;
transform: translateX(-50%);
border-color: transparent;
border-style: solid;
border-width: 0 calc(#{$eps-popover-arrow-width} / 2) $eps-popover-arrow-height calc(#{$eps-popover-arrow-width} / 2);
border-bottom-color: var(--popover-arrow-color);
}
&__item {
padding: $eps-popover-item-spacing-y $eps-popover-item-spacing-x;
background-color: var(--popover-item-background-color);
color: var(--popover-item-color);
font-size: $eps-popover-item-font-size;
font-weight: $eps-popover-font-weight;
line-height: $eps-popover-item-line-height;
width: 100%;
align-items: center;
cursor: pointer;
&:hover {
color: var(--popover-item-hover-color);
}
&--danger {
&:hover {
color: var(--popover-item-danger-hover-color);
}
}
.#{$eps-prefix}icon {
font-size: inherit;
margin-inline-end: spacing(5);
}
}
}