.next-inverted-corner[data-flickering="1"]{
opacity: 0;
}
.next-inverted-corner{
--block-background: #8EFF71;
--corners-background: #fff;
--block-border-radius: 20px;
--thickness: var(--block-border-radius);
--inverted-corner-border-radius-1: 50%;
--content-corner-width-1: 60px;
--content-corner-height-1: 60px;
--content-corner-distance-1: 6px;
--inverted-corner-border-radius-2: 50%;
--content-corner-width-2: 60px;
--content-corner-height-2: 60px;
--content-corner-distance-2: 6px;
--inverted-corner-border-radius-3: 50%;
--content-corner-width-3: 60px;
--content-corner-height-3: 60px;
--content-corner-distance-3: 6px;
--inverted-corner-border-radius-4: 50%;
--content-corner-width-4: 60px;
--content-corner-height-4: 60px;
--content-corner-distance-4: 6px;
width: 400px;
height: 400px;
}
.next-inverted-corner__inner {
position: relative;
width: 100%;
height: 100%;
background: var(--corners-background);
border-radius: var(--block-border-radius);
overflow: hidden;
}
.next-inverted-corner__box {
width: 100%;
height: 100%;
background: var(--corners-background);
border-radius: var(--block-border-radius);
overflow: hidden;
} .next-inverted-corner__content-wrapper {
position: absolute;
inset: 0;
background: var(--block-background);
display: flex;
align-items: center;
justify-content: center;
}
.next-inverted-corner__content-corner {
position: absolute;
z-index: 1;
background: var(--corners-background);
}
.next-inverted-corner__content-corner::before {
position: absolute;
z-index: -1;
content: "";
background: transparent;
width: var(--thickness);
height: var(--thickness);
}
.next-inverted-corner__content-corner::after {
position: absolute;
z-index: -1;
content: "";
background: transparent;
width: var(--thickness);
height: var(--thickness);
} .next-inverted-corner__inner:has(.next-inverted-corner__content-corner[data-side="top-left"]){
border-top-left-radius: 0;
}
.next-inverted-corner__content-corner[data-side="top-left"][data-corner="1"]{
border-bottom-right-radius: var(--inverted-corner-border-radius-1);
width: var(--content-corner-width-1);
height: var(--content-corner-height-1);
top: calc(var(--content-corner-distance-1) * -1);
left: calc(var(--content-corner-distance-1) * -1);
}
.next-inverted-corner__content-corner[data-side="top-left"][data-corner="2"]{
border-bottom-right-radius: var(--inverted-corner-border-radius-2);
width: var(--content-corner-width-2);
height: var(--content-corner-height-2);
top: calc(var(--content-corner-distance-2) * -1);
left: calc(var(--content-corner-distance-2) * -1);
}
.next-inverted-corner__content-corner[data-side="top-left"][data-corner="3"]{
border-bottom-right-radius: var(--inverted-corner-border-radius-3);
width: var(--content-corner-width-3);
height: var(--content-corner-height-3);
top: calc(var(--content-corner-distance-3) * -1);
left: calc(var(--content-corner-distance-3) * -1);
}
.next-inverted-corner__content-corner[data-side="top-left"][data-corner="4"]{
border-bottom-right-radius: var(--inverted-corner-border-radius-4);
width: var(--content-corner-width-4);
height: var(--content-corner-height-4);
top: calc(var(--content-corner-distance-4) * -1);
left: calc(var(--content-corner-distance-4) * -1);
}
.next-inverted-corner__content-corner[data-side="top-left"]::before{
right: calc(var(--thickness) * -1);
border-top-left-radius: var(--thickness);
box-shadow: calc(var(--block-border-radius) * -1) calc(var(--block-border-radius) * -1) 0 var(--block-border-radius) var(--corners-background);
}
.next-inverted-corner__content-corner[data-side="top-left"][data-corner="1"]::before{
top: var(--content-corner-distance-1);
}
.next-inverted-corner__content-corner[data-side="top-left"][data-corner="2"]::before{
top: var(--content-corner-distance-2);
}
.next-inverted-corner__content-corner[data-side="top-left"][data-corner="3"]::before{
top: var(--content-corner-distance-3);
}
.next-inverted-corner__content-corner[data-side="top-left"][data-corner="4"]::before{
top: var(--content-corner-distance-4);
}
.next-inverted-corner__content-corner[data-side="top-left"]::after{
bottom: calc(var(--thickness) * -1);
border-top-left-radius: var(--thickness);
box-shadow: calc(var(--block-border-radius) * -1) calc(var(--block-border-radius) * -1) 0 var(--block-border-radius) var(--corners-background);
}
.next-inverted-corner__content-corner[data-side="top-left"][data-corner="1"]::after{
left: var(--content-corner-distance-1);
}
.next-inverted-corner__content-corner[data-side="top-left"][data-corner="2"]::after{
left: var(--content-corner-distance-2);
}
.next-inverted-corner__content-corner[data-side="top-left"][data-corner="3"]::after{
left: var(--content-corner-distance-3);
}
.next-inverted-corner__content-corner[data-side="top-left"][data-corner="4"]::after{
left: var(--content-corner-distance-4);
} .next-inverted-corner__inner:has(.next-inverted-corner__content-corner[data-side="top-right"]){
border-top-right-radius: 0;
}
.next-inverted-corner__content-corner[data-side="top-right"][data-corner="1"]{
border-bottom-left-radius: var(--inverted-corner-border-radius-1);
width: var(--content-corner-width-1);
height: var(--content-corner-height-1);
top: calc(var(--content-corner-distance-1) * -1);
right: calc(var(--content-corner-distance-1) * -1);
}
.next-inverted-corner__content-corner[data-side="top-right"][data-corner="2"]{
border-bottom-left-radius: var(--inverted-corner-border-radius-2);
width: var(--content-corner-width-2);
height: var(--content-corner-height-2);
top: calc(var(--content-corner-distance-2) * -1);
right: calc(var(--content-corner-distance-2) * -1);
}
.next-inverted-corner__content-corner[data-side="top-right"][data-corner="3"]{
border-bottom-left-radius: var(--inverted-corner-border-radius-3);
width: var(--content-corner-width-3);
height: var(--content-corner-height-3);
top: calc(var(--content-corner-distance-3) * -1);
right: calc(var(--content-corner-distance-3) * -1);
}
.next-inverted-corner__content-corner[data-side="top-right"][data-corner="4"]{
border-bottom-left-radius: var(--inverted-corner-border-radius-4);
width: var(--content-corner-width-4);
height: var(--content-corner-height-4);
top: calc(var(--content-corner-distance-4) * -1);
right: calc(var(--content-corner-distance-4) * -1);
}
.next-inverted-corner__content-corner[data-side="top-right"]::before{
left: calc(var(--thickness) * -1);
border-top-right-radius: var(--thickness);
box-shadow: var(--block-border-radius) calc(var(--block-border-radius) * -1) 0 var(--block-border-radius) var(--corners-background);
}
.next-inverted-corner__content-corner[data-side="top-right"][data-corner="1"]::before{
top: var(--content-corner-distance-1);
}
.next-inverted-corner__content-corner[data-side="top-right"][data-corner="2"]::before{
top: var(--content-corner-distance-2);
}
.next-inverted-corner__content-corner[data-side="top-right"][data-corner="3"]::before{
top: var(--content-corner-distance-3);
}
.next-inverted-corner__content-corner[data-side="top-right"][data-corner="4"]::before{
top: var(--content-corner-distance-4);
}
.next-inverted-corner__content-corner[data-side="top-right"]::after{
bottom: calc(var(--thickness) * -1);
border-top-right-radius: var(--thickness);
box-shadow: var(--block-border-radius) calc(var(--block-border-radius) * -1) 0 var(--block-border-radius) var(--corners-background);
}
.next-inverted-corner__content-corner[data-side="top-right"][data-corner="1"]::after{
right: var(--content-corner-distance-1);
}
.next-inverted-corner__content-corner[data-side="top-right"][data-corner="2"]::after{
right: var(--content-corner-distance-2);
}
.next-inverted-corner__content-corner[data-side="top-right"][data-corner="3"]::after{
right: var(--content-corner-distance-3);
}
.next-inverted-corner__content-corner[data-side="top-right"][data-corner="4"]::after{
right: var(--content-corner-distance-4);
} .next-inverted-corner__inner:has(.next-inverted-corner__content-corner[data-side="bottom-left"]){
border-bottom-left-radius: 0;
}
.next-inverted-corner__content-corner[data-side="bottom-left"][data-corner="1"]{
border-top-right-radius: var(--inverted-corner-border-radius-1);
width: var(--content-corner-width-1);
height: var(--content-corner-height-1);
bottom: calc(var(--content-corner-distance-1) * -1);
left: calc(var(--content-corner-distance-1) * -1);
}
.next-inverted-corner__content-corner[data-side="bottom-left"][data-corner="2"]{
border-top-right-radius: var(--inverted-corner-border-radius-2);
width: var(--content-corner-width-2);
height: var(--content-corner-height-2);
bottom: calc(var(--content-corner-distance-2) * -1);
left: calc(var(--content-corner-distance-2) * -1);
}
.next-inverted-corner__content-corner[data-side="bottom-left"][data-corner="3"]{
border-top-right-radius: var(--inverted-corner-border-radius-3);
width: var(--content-corner-width-3);
height: var(--content-corner-height-3);
bottom: calc(var(--content-corner-distance-3) * -1);
left: calc(var(--content-corner-distance-3) * -1);
}
.next-inverted-corner__content-corner[data-side="bottom-left"][data-corner="4"]{
border-top-right-radius: var(--inverted-corner-border-radius-4);
width: var(--content-corner-width-4);
height: var(--content-corner-height-4);
bottom: calc(var(--content-corner-distance-4) * -1);
left: calc(var(--content-corner-distance-4) * -1);
}
.next-inverted-corner__content-corner[data-side="bottom-left"]::before{
right: calc(var(--thickness) * -1);
border-bottom-left-radius: var(--thickness);
box-shadow: calc(var(--block-border-radius) * -1) var(--block-border-radius) 0 var(--block-border-radius) var(--corners-background);
}
.next-inverted-corner__content-corner[data-side="bottom-left"][data-corner="1"]::before{
bottom: var(--content-corner-distance-1);
}
.next-inverted-corner__content-corner[data-side="bottom-left"][data-corner="2"]::before{
bottom: var(--content-corner-distance-2);
}
.next-inverted-corner__content-corner[data-side="bottom-left"][data-corner="3"]::before{
bottom: var(--content-corner-distance-3);
}
.next-inverted-corner__content-corner[data-side="bottom-left"][data-corner="4"]::before{
bottom: var(--content-corner-distance-4);
}
.next-inverted-corner__content-corner[data-side="bottom-left"]::after{
top: calc(var(--thickness) * -1);
border-bottom-left-radius: var(--thickness);
box-shadow: calc(var(--block-border-radius) * -1) var(--block-border-radius) 0 var(--block-border-radius) var(--corners-background);
}
.next-inverted-corner__content-corner[data-side="bottom-left"][data-corner="1"]::after{
left: var(--content-corner-distance-1);
}
.next-inverted-corner__content-corner[data-side="bottom-left"][data-corner="2"]::after{
left: var(--content-corner-distance-2);
}
.next-inverted-corner__content-corner[data-side="bottom-left"][data-corner="3"]::after{
left: var(--content-corner-distance-3);
}
.next-inverted-corner__content-corner[data-side="bottom-left"][data-corner="4"]::after{
left: var(--content-corner-distance-4);
} .next-inverted-corner__inner:has(.next-inverted-corner__content-corner[data-side="bottom-right"]){
border-bottom-right-radius: 0;
}
.next-inverted-corner__content-corner[data-side="bottom-right"][data-corner="1"]{
border-top-left-radius: var(--inverted-corner-border-radius-1);
width: var(--content-corner-width-1);
height: var(--content-corner-height-1);
bottom: calc(var(--content-corner-distance-1) * -1);
right: calc(var(--content-corner-distance-1) * -1);
}
.next-inverted-corner__content-corner[data-side="bottom-right"][data-corner="2"]{
border-top-left-radius: var(--inverted-corner-border-radius-2);
width: var(--content-corner-width-2);
height: var(--content-corner-height-2);
bottom: calc(var(--content-corner-distance-2) * -1);
right: calc(var(--content-corner-distance-2) * -1);
}
.next-inverted-corner__content-corner[data-side="bottom-right"][data-corner="3"]{
border-top-left-radius: var(--inverted-corner-border-radius-3);
width: var(--content-corner-width-3);
height: var(--content-corner-height-3);
bottom: calc(var(--content-corner-distance-3) * -1);
right: calc(var(--content-corner-distance-3) * -1);
}
.next-inverted-corner__content-corner[data-side="bottom-right"][data-corner="4"]{
border-top-left-radius: var(--inverted-corner-border-radius-4);
width: var(--content-corner-width-4);
height: var(--content-corner-height-4);
bottom: calc(var(--content-corner-distance-4) * -1);
right: calc(var(--content-corner-distance-4) * -1);
}
.next-inverted-corner__content-corner[data-side="bottom-right"]::before{
left: calc(var(--thickness) * -1);
border-bottom-right-radius: var(--thickness);
box-shadow: var(--block-border-radius) var(--block-border-radius) 0 var(--block-border-radius) var(--corners-background);
}
.next-inverted-corner__content-corner[data-side="bottom-right"][data-corner="1"]::before{
bottom: var(--content-corner-distance-1);
}
.next-inverted-corner__content-corner[data-side="bottom-right"][data-corner="2"]::before{
bottom: var(--content-corner-distance-2);
}
.next-inverted-corner__content-corner[data-side="bottom-right"][data-corner="3"]::before{
bottom: var(--content-corner-distance-3);
}
.next-inverted-corner__content-corner[data-side="bottom-right"][data-corner="4"]::before{
bottom: var(--content-corner-distance-4);
}
.next-inverted-corner__content-corner[data-side="bottom-right"]::after{
top: calc(var(--thickness) * -1);
border-bottom-right-radius: var(--thickness);
box-shadow: var(--block-border-radius) var(--block-border-radius) 0 var(--block-border-radius) var(--corners-background);
}
.next-inverted-corner__content-corner[data-side="bottom-right"][data-corner="1"]::after{
right: var(--content-corner-distance-1);
}
.next-inverted-corner__content-corner[data-side="bottom-right"][data-corner="2"]::after{
right: var(--content-corner-distance-2);
}
.next-inverted-corner__content-corner[data-side="bottom-right"][data-corner="3"]::after{
right: var(--content-corner-distance-3);
}
.next-inverted-corner__content-corner[data-side="bottom-right"][data-corner="4"]::after{
right: var(--content-corner-distance-4);
} .next-inverted-corner__ball {
position: absolute;
inset: 10px;
background: #282828;
border-radius: 100px;
width: unset;
min-width: unset !important;
min-height: unset !important;
outline: unset !important;
}