.dialog {
position: fixed;
width: 210px;
padding: 16px 22px 10px;
font-size: var(--reflag-feedback-dialog-font-size, 1rem);
font-family: var(
--reflag-feedback-dialog-font-family,
InterVariable,
Inter,
system-ui,
Open Sans,
sans-serif
);
color: var(--reflag-feedback-dialog-color, #1e1f24);
border: 1px solid;
border-color: var(--reflag-feedback-dialog-border, #d8d9df);
border-radius: var(--reflag-feedback-dialog-border-radius, 6px);
box-shadow: var(
--reflag-feedback-dialog-box-shadow,
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05)
);
background-color: var(--reflag-feedback-dialog-background-color, #fff);
z-index: 2147410000;
&:not(.modal) {
margin: unset;
top: unset;
right: unset;
left: unset;
bottom: unset;
}
}
.arrow {
background-color: var(--reflag-feedback-dialog-background-color, #fff);
box-shadow: var(--reflag-feedback-dialog-border, #d8d9df) -1px -1px 1px 0px;
&.bottom {
box-shadow: var(--reflag-feedback-dialog-border, #d8d9df) -1px -1px 1px 0px;
}
&.top {
box-shadow: var(--reflag-feedback-dialog-border, #d8d9df) 1px 1px 1px 0px;
}
&.left {
box-shadow: var(--reflag-feedback-dialog-border, #d8d9df) 1px -1px 1px 0px;
}
&.right {
box-shadow: var(--reflag-feedback-dialog-border, #d8d9df) -1px 1px 1px 0px;
}
}
.close {
position: absolute;
top: 6px;
right: 6px;
width: 28px;
height: 28px;
padding: 0;
margin: 0;
background: none;
border: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
color: var(--reflag-feedback-dialog-color, #1e1f24);
svg {
position: absolute;
}
}
.plug {
font-size: 0.75em;
text-align: center;
margin-top: 7px;
width: 100%;
}
.plug a {
opacity: 0.5;
color: var(--reflag-feedback-dialog-color, #1e1f24);
text-decoration: none;
transition: opacity 200ms;
}
.plug a:hover {
opacity: 0.7;
}