Shadow of a complex polygon css - html

Question

I want a shadow around and iside the hole of a cut donut polygon .
Hello,
I am trying to do a button in form of a cut donut but I am having trouble putting borders to it without making another polygon inside, so I tried to put shadows but only inset box-shadow was working and that wasn't what I wanted.
Here is the code :
body>
<div class="container">
<div class="polygon"></div>
</div>
</body>
and css :
:root{
--color1 : #86a59c;
--color2 : #284141;
--lightShadow : #ffffff55;
--darkShadow : #0000001E;
--polygon : polygon( 0% 50%, 1.01020514433644% 40%, 4.1742430504416% 30%, 10% 20%, 15% 18%, 20% 20%, 30% 30%, 30.5% 32.5%, 30% 35%, 27.0871215252208% 40%, 25% 50%, 27.0871215252208% 60%, 30% 65%, 35% 70%, 40% 72.9128784747792%, 50% 75%, 60% 72.9128784747792%, 65% 70%, 70% 65%, 72.9128784747792% 60%, 75% 50%, 72.9128784747792% 40%, 70% 35%, 69.5% 32.5%, 70% 30%, 80% 20%, 85% 18%, 90% 20%, 95.8257569495584% 30%, 98.9897948556636% 40%, 100% 50%, 98.9897948556636% 60%, 95.8257569495584% 70%, 90% 80%, 80% 90%, 70% 95.8257569495584%, 60% 98.9897948556636%, 50% 100%, 40% 98.9897948556636%, 30% 95.8257569495584%, 20% 90%, 10% 80%, 4.1742430504416% 70%, 1.01020514433644% 60%);}
body {
padding: 0;
margin: 0;
background-color: #888888;
font-size: 0.3em;
}
.container {
height: 20em;
width: 20em;
background: var(--color1);
position: absolute;
filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.5));
}
.polygon {
content: "";
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 80%;
width: 80%;
background-color: var(--color2);
clip-path: var(--polygon);
}
What do you think? The main problem is chadow around and inside the hole of the donut.