.corners {
    --asenka-corners-default: var(--global-background);
    --asenka-corners-muted: var(--global-muted-background);
    --asenka-corners-primary: var(--global-primary-background);
    --asenka-corners-secondary: var(--global-secondary-background);
    --asenka-corners-transparent: transparent;

    display: flex;
    width: 100%;
    line-height: 0;
    overflow: hidden;
    
    margin-top:-1px;
    margin-bottom: -1px;
}

.corners .corner {
    display: block;
    flex: 0 0 85px;
    width: 85px;
    height: 76px;
}

.corners .middle {
    display: block;
    flex: 1 1 auto;
    height: 75px;
    margin-left: -1px;
    margin-right: -1px;
}

.corners .svg-corner {
    display: block;
    width: 85px;
    height: 76px;
}

/* Right side mirrors the left SVG */
.corners-bottom .corner.right .svg-corner {
    transform: scaleX(-1);
}

/* Top version flips the whole shape vertically */
.corners-top .corner.left .svg-corner {
    transform: scaleY(-1);
}

.corners-top .corner.right .svg-corner {
    transform: scale(-1, -1);
}

/* Outer colors */
.corners-outer-default .outer {
    fill: var(--asenka-corners-default);
}

.corners-outer-muted .outer {
    fill: var(--asenka-corners-muted);
}

.corners-outer-primary .outer {
    fill: var(--asenka-corners-primary);
}

.corners-outer-secondary .outer {
    fill: var(--asenka-corners-secondary);
}


.corners-outer-transparent .outer {
    fill: var(--asenka-corners-transparent);
}

/* Inner colors */
.corners-inner-default .inner,
.corners-inner-default .middle {
    fill: var(--asenka-corners-default);
    background: var(--asenka-corners-default);
}

.corners-inner-muted .inner,
.corners-inner-muted .middle {
    fill: var(--asenka-corners-muted);
    background: var(--asenka-corners-muted);
}

.corners-inner-primary .inner,
.corners-inner-primary .middle {
    fill: var(--asenka-corners-primary);
    background: var(--asenka-corners-primary);
}

.corners-inner-secondary .inner,
.corners-inner-secondary .middle {
    fill: var(--asenka-corners-secondary);
    background: var(--asenka-corners-secondary);
}

.corners-inner-transparent .inner,
.corners-inner-transparent .middle {
    fill: var(--asenka-corners-transparent);
    background: var(--asenka-corners-transparent);
}