rgfgdfgfdgfdsg
Open Popover
Some texxxt content Lorem ipsum dolor sit amet cons ectetur adipisicing elit. Reiciendis corrupti, sequi et, earum obcaecati aut eius dicta commodi inventore mollitia totam? Omnis iste obcaecati nam magni sunt repellat dolore mollitia?
Close Popover
:root {
–color-primary-hue: 315;
}
main {
width: 100%;
height: 100dvh;
display: grid;
place-content: center;
}
[popovertarget=”confirm-dialog”] {
border: none;
padding-inline: 1rem;
padding-block: 0.75rem;
border-radius: 0.5rem;
background-color: oklch(58.67% 0.15 var(–color-primary-hue));
color: white;
&:hover,
&:focus-visible {
outline-offset: 4px;
outline-color: green;
background-color: oklch(55% 0.122 var(–color-primary-hue));
box-shadow: 0px 3px 6px -1px oklch(27.6% 0.122 var(–color-primary-hue) / 50%);
}
}
[popover] {
max-inline-size: 400px;
padding: 1.5rem;
border: none;
border-radius: 0.5rem;
box-shadow: 2px 8px 16px oklch(27.6% 0.122 var(–color-primary-hue) / 30%);
}
::backdrop {
background-color: oklch(5% 0.25 var(–color-primary-hue) / 25%);
}
p {
line-height: 165%;
}
