@use'../variables' as*;

:root{
    --fui-tl:0px;
    --fui-tr:0px;
    --fui-br:0px;
    --fui-bl:0px;
    --fui-t:0px;
    --fui-r:0px;
    --fui-b:0px;
    --fui-l:0px;
    --fui-t-extend:0px;
    --fui-r-extend:0px;
    --fui-b-extend:0px;
    --fui-l-extend:0px;
    --fui-t-center:50%;
    --fui-r-center:50%;
    --fui-b-center:50%;
    --fui-l-center:50%;
    --fui-border:5px;
    --fui-border-bg:#fff;
    --fui-inlay:5px;
    --fui-inlay-bg:#4B4CB0;
}

// Default sizing 
// t-clip-x, r-clip-y, b-clip-x, l-clip-y, all-clip, 
// tl, tr, br, bl, all-corner 
.fui{
    &-all-clip{
        --fui-t-extend:50px;
        --fui-r-extend:50px;
        --fui-b-extend:50px;
        --fui-l-extend:50px;
        --fui-t:16px;
        --fui-r:16px;
        --fui-b:16px;
        --fui-l:16px;
    }
    &-t-clip-x{
        --fui-t-extend:50px;
        --fui-t:16px;
    }
    &-r-clip-y{
        --fui-r-extend:50px;
        --fui-r:16px;
    }
    &-b-clip-x{
        --fui-b-extend:50px;
        --fui-b:16px;
    }
    &-l-clip-y{
        --fui-l-extend:50px;
        --fui-l:16px;
    }

    //tl, tr, br, bl
    &-all-corner{
        --fui-tl:16px;
        --fui-tr:16px;
        --fui-br:16px;
        --fui-bl:16px;
    }
    &-tl{
        --fui-tl:16px;
    }
    &-tr{
        --fui-tr:16px;
    }
    &-br{
        --fui-br:16px;
    }
    &-bl{
        --fui-bl:16px;
    }
}


// clip size
$clip-sizes: (0:0, 1:1, 2:2, 3:3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9, 10: 10, 11: 11, 12: 12, 13: 13, 14: 14, 16: 16, 20: 20, 24: 24, 25: 25, 26: 26,  28: 28,  30: 30, 32: 32, 34: 34, 48: 48, 50: 50, 64: 64, 75: 75, 80: 80, 96: 96, 112: 112 );
@each $key, $value in $clip-sizes {
    .fui-all-#{$key}{
        --fui-tl: #{$value}px;
        --fui-tr: #{$value}px;
        --fui-br: #{$value}px;
        --fui-bl: #{$value}px;
    }
    .fui-all-corner-#{$key}{
        //FUI
        --fui-tl: #{$value}px;
        --fui-tr: #{$value}px;
        --fui-br: #{$value}px;
        --fui-bl: #{$value}px;
    }
    .fui-tl-#{$key}{
        --fui-tl: #{$value}px;
    }
    .fui-tr-#{$key}{
        --fui-tr: #{$value}px;
    }
    .fui-bl-#{$key}{
        --fui-bl: #{$value}px;
    }
    .fui-br-#{$key}{
        --fui-br: #{$value}px;
    }
    .fui-all-#{$key}{
        --fui-t: #{$value}px;
        --fui-r: #{$value}px;
        --fui-b: #{$value}px;
        --fui-l: #{$value}px;
    }
    .fui-x-#{$key}{
        --fui-r: #{$value}px;
        --fui-l: #{$value}px;
    }
    .fui-y-#{$key}{
        --fui-t: #{$value}px;
        --fui-b: #{$value}px;
    }

    //Fui Border
    .fui-border-#{$key}{
        --fui-border: #{$value}px !important;
    }

    //Fui Inlay
    .fui-inlay-#{$key}{
        --fui-inlay: #{$value}px !important;
    }
}

// FUI extend PX
$clip-extend-sizes: (0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9, 10: 10, 20: 20, 25: 25, 30: 30, 35: 35, 40: 40, 45: 45, 50: 50, 55: 55, 60: 60, 65: 65, 70: 70, 75: 75, 80: 80, 85: 85, 90: 90, 95: 95, 100: 100, 120: 120, 150: 150, 200: 200, 250: 250);
@each $key, $value in $clip-extend-sizes {
    // FUI Extend
    .fui-all-extend-#{$key}{
        --fui-t-extend: #{$value}px;
        --fui-r-extend: #{$value}px;
        --fui-b-extend: #{$value}px;
        --fui-l-extend: #{$value}px;
    }
    .fui-extend-x-#{$key}{
        --fui-r-extend: #{$value}px !important;
        --fui-l-extend: #{$value}px !important;
    }
    .fui--extend-y-#{$key}{
        --fui-t-extend: #{$value}px !important;
        --fui-b-extend: #{$value}px !important;
    }
    .fui-r-extend-#{$key}{
        --fui-r-extend: #{$value}px !important;
    }
    .fui-l-extend-#{$key}{
        --fui-l-extend: #{$value}px !important;
    }
    .fui-t-extend-#{$key}{
        --fui-t-extend: #{$value}px !important;
    }
    .fui-b-extend-#{$key}{
        --fui-b-extend: #{$value}px !important;
    }

    .fui-t-#{$key}{
        --fui-t: #{$value}px;
    }
    .fui-b-#{$key}{
        --fui-b: #{$value}px;
    }
    .fui-l-#{$key}{
        --fui-l: #{$value}px;
    }
    .fui-r-#{$key}{
        --fui-r: #{$value}px;
    }
}

// Clip border & inlay size ===*/
$clip-border-sizes: ( 1:1, 2:2, 3:3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9, 10: 10);
@each $key, $value in $clip-border-sizes {
    //Border
    .fui-border-#{$key}{
        --fui-border:#{$value}px !important;
    }

    //Inlay
    .fui-inlay-all-#{$key}{
        --fui-inlay: #{$value}px;
    }
    
}

// Clip border & inlay color*/
.fui-border{
    &-primary{
        --fui-border-bg:#{rgba($color: $primary, $alpha: 1.0)}; 
    }
    &-secondary{
        --fui-border-bg:#{rgba($color: $secondary, $alpha: 1.0)};
    }
    &-success{
        --fui-border-bg:#{rgba($color: $success, $alpha: 1.0)}; 
    }
    &-warning{
        --fui-border-bg:#{rgba($color: $warning, $alpha: 1.0)}; 
    }
    &-danger{
        --fui-border-bg:#{rgba($color: $danger, $alpha: 1.0)}; 
    }
    &-white{
        --fui-border-bg:#{rgba($color: $white, $alpha: 1.0)}; 
    }
    &-black{
        --fui-border-bg:#{rgba($color: $black, $alpha: 1.0)}; 
    }
    &-transparent{
        --fui-border-bg:#{rgba($color: $black, $alpha: 0)}; 
    }
}
.fui-inlay-bg{
    &-primary{
        --fui-inlay-bg:#{rgba($color: $primary, $alpha: 1.0)};
    }
    &-secondary{
        --fui-inlay-bg:#{rgba($color: $secondary, $alpha: 1.0)};
    }
    &-success{
        --fui-inlay-bg:#{rgba($color: $success, $alpha: 1.0)}; 
    }
    &-danger{
        --fui-inlay-bg:#{rgba($color: $danger, $alpha: 1.0)}; 
    }
    &-warning{
        --fui-inlay-bg:#{rgba($color: $warning, $alpha: 1.0)}; 
    }
    &-white{
        --fui-inlay-bg:#{rgba($color: $white, $alpha: 1.0)};  
    }
    &-black{
        --fui-inlay-bg:#{rgba($color: $black, $alpha: 1.0)}; 
    }
    &-transparent{
        --fui-inlay-bg:#{rgba($color: $black, $alpha: 0)}; 
    }
}

$clip-border-color-opacity: ( 5: 0.05, 10: 0.10, 25: 0.25, 50: 0.50, 75: 0.75);
@each $key, $value in $clip-border-color-opacity {
    //Border color
    .fui-border{
        &-primary{
            &-#{$key}{
                --fui-border-bg:#{rgba($color: $primary, $alpha: $value)};
            }  
        }
        &-secondary{
            &-#{$key}{
                --fui-border-bg:#{rgba($color: $secondary, $alpha: $value)};
            }  
        }
        &-success{
            &-#{$key}{
                --fui-border-bg:#{rgba($color: $success, $alpha: $value)};
            }  
        }
        &-warning{
            &-#{$key}{
                --fui-border-bg:#{rgba($color: $warning, $alpha: $value)};
            }  
        }
        &-danger{
            &-#{$key}{
                --fui-border-bg:#{rgba($color: $danger, $alpha: $value)};
            }  
        }
        &-white{
            &-#{$key}{
                --fui-border-bg:#{rgba($color: $white, $alpha: $value)};
            }  
        }
        &-black{
            &-#{$key}{
                --fui-border-bg:#{rgba($color: $black, $alpha: $value)};
            }  
        }
    }

    //Inlay color
    .fui-inlay{
        &-primary{
            &-#{$key}{
                --aug-inlay-bg:#{rgba($color: $primary, $alpha: $value)};

                //FUI
                --fui-inlay-bg:#{rgba($color: $primary, $alpha: $value)};
            }  
        }
        &-secondary{
            &-#{$key}{
                --aug-inlay-bg:#{rgba($color: $secondary, $alpha: $value)};

                //FUI
                --fui-inlay-bg:#{rgba($color: $secondary, $alpha: $value)};
            }  
        }
        &-success{
            &-#{$key}{
                --aug-inlay-bg:#{rgba($color: $success, $alpha: $value)};

                //FUI
                --fui-inlay-bg:#{rgba($color: $success, $alpha: $value)};
            }  
        }
        &-warning{
            &-#{$key}{
                --aug-inlay-bg:#{rgba($color: $warning, $alpha: $value)};

                //FUI
                --fui-inlay-bg:#{rgba($color: $warning, $alpha: $value)};
            }  
        }
        &-danger{
            &-#{$key}{
                --aug-inlay-bg:#{rgba($color: $danger, $alpha: $value)};

                //FUI
                --fui-inlay-bg:#{rgba($color: $danger, $alpha: $value)};
            }  
        }
        &-white{
            &-#{$key}{
                --aug-inlay-bg:#{rgba($color: $white, $alpha: $value)};

                //FUI
                --fui-inlay-bg:#{rgba($color: $white, $alpha: $value)};
            }  
        }
        &-black{
            &-#{$key}{
                --aug-inlay-bg:#{rgba($color: $black, $alpha: $value)};

                //FUI
                --fui-inlay-bg:#{rgba($color: $black, $alpha: $value)};
            }  
        }
    }
    
}



// Clip center with border & inlay
[fui-clip-both]{
    position: relative;
    clip-path: polygon(
        0% var(--fui-tl), var(--fui-tl) 0%, /*1. tl*/

        /*1.2 t*/
        calc(var(--fui-t-center) - var(--fui-t-extend)) 0%, /*1.2.1 tl*/
        calc(calc(var(--fui-t-center) - var(--fui-t-extend)) + var(--fui-t)) var(--fui-t), /*1.2.2 bl*/ 
        calc(calc(var(--fui-t-center) + var(--fui-t-extend)) - var(--fui-t)) var(--fui-t),  /*1.2.3 br*/
        calc(var(--fui-t-center) + var(--fui-t-extend)) 0%, /*1.2.4 tr*/

        calc(100% - var(--fui-tr)) 0%, 100% var(--fui-tr), /*2. tr*/

        /*2.1 r*/
        100% calc(var(--fui-r-center) - var(--fui-r-extend)), /*2.1.1 tr*/
        calc(100% - var(--fui-r)) calc(calc(var(--fui-r-center) - var(--fui-r-extend)) + var(--fui-r)), /*2.1.2 tl*/
        calc(100% - var(--fui-r)) calc(calc(var(--fui-r-center) + var(--fui-r-extend)) - var(--fui-r)), /*2.1.3 bl*/
        100% calc(var(--fui-r-center) + var(--fui-r-extend)), /*2.1.4 br*/ 

        100% calc(100% - var(--fui-br)), calc(100% - var(--fui-br)) 100%, /*3. br*/ 

        /*3.1 b*/
        calc(var(--fui-b-center) + var(--fui-b-extend)) 100%, /*3.2.1 br*/ 
        calc(calc(var(--fui-b-center) + var(--fui-b-extend)) - var(--fui-b)) calc(100% - var(--fui-b)), /*3.2.2 tr*/ 
        calc(calc(var(--fui-b-center) - var(--fui-b-extend)) + var(--fui-b)) calc(100% - var(--fui-b)),   /*3.2.3 tl*/
        calc(var(--fui-b-center) - var(--fui-b-extend)) 100%,  /*3.2.4 bl*/

        var(--fui-bl) 100%, 0 calc(100% - var(--fui-bl)), /*4. bl*/ 

        /*4.1 l*/
        0% calc(var(--fui-l-center) + var(--fui-l-extend)), /*4.1.1 bl*/
        var(--fui-l) calc(calc(var(--fui-l-center) + var(--fui-l-extend)) - var(--fui-l)), /*4.1.2 br*/
        var(--fui-l) calc(calc(var(--fui-l-center) - var(--fui-l-extend)) + var(--fui-l)), /*4.1.3 tr*/
        0% calc(var(--fui-l-center) - var(--fui-l-extend)) /*4.1.4 tl*/
    );

    &::before{
        content: "";
        position: absolute;
        z-index: -1;
        top: calc(var(--fui-inlay) + var(--fui-border));
        right: calc(var(--fui-inlay) + var(--fui-border));
        bottom: calc(var(--fui-inlay) + var(--fui-border));
        left: calc(var(--fui-inlay) + var(--fui-border));
        
        clip-path: polygon(
            /*1. tl*/ 
            0% calc(var(--fui-tl) - calc(var(--fui-inlay) + var(--fui-border)) / 2),
            calc(var(--fui-tl) - calc(var(--fui-inlay) + var(--fui-border)) / 2) 0%, 
            
            /*t*/
            calc(var(--fui-t-center) - calc(var(--fui-t-extend) + calc(var(--fui-border) / 2) + calc(var(--fui-inlay) / 2))) 0%, /*tl*/
            calc(calc(var(--fui-t-center) - calc(var(--fui-t-extend) + calc(var(--fui-border) / 2) + calc(var(--fui-inlay) / 2))) + var(--fui-t)) var(--fui-t), /*bl*/ 
            calc(calc(var(--fui-t-center) + calc(var(--fui-t-extend) + calc(var(--fui-border) / 2) + calc(var(--fui-inlay) / 2))) - var(--fui-t)) var(--fui-t),  /*br*/
            calc(var(--fui-t-center) + calc(var(--fui-t-extend) + calc(var(--fui-border) / 2) + calc(var(--fui-inlay) / 2))) 0%, /*tr*/
            
            /*2. tr*/ 
            calc(100% - calc(var(--fui-tr) - calc(var(--fui-inlay) + var(--fui-border)) / 2)) 0%,
            100% calc(var(--fui-tr) - calc(var(--fui-inlay) + var(--fui-border)) / 2), 

            /*r*/
            100% calc(var(--fui-r-center) - calc(var(--fui-r-extend) + calc(var(--fui-border) / 2) + calc(var(--fui-inlay) / 2))), /*tr*/
            calc(100% - var(--fui-r)) calc(calc(var(--fui-r-center) - calc(var(--fui-r-extend) + calc(var(--fui-border) / 2) + calc(var(--fui-inlay) / 2))) + var(--fui-r)), /*tl*/
            calc(100% - var(--fui-r)) calc(calc(var(--fui-r-center) + calc(var(--fui-r-extend) + calc(var(--fui-border) / 2) + calc(var(--fui-inlay) / 2))) - var(--fui-r)), /*bl*/
            100% calc(var(--fui-r-center) + calc(var(--fui-r-extend) + calc(var(--fui-border) / 2) + calc(var(--fui-inlay) / 2))), /*br*/ 

            /*3. br*/ 
            100% calc(100% - calc(var(--fui-br) - calc(var(--fui-inlay) + var(--fui-border)) / 2)),
            calc(100% - calc(var(--fui-br) - calc(var(--fui-inlay) + var(--fui-border)) / 2)) 100%,

            /*3.1 b*/
            calc(var(--fui-b-center) + calc(var(--fui-b-extend) + calc(var(--fui-border) / 2) + calc(var(--fui-inlay) / 2))) 100%, /*br*/ 
            calc(calc(var(--fui-b-center) + calc(var(--fui-b-extend) + calc(var(--fui-border) / 2) + calc(var(--fui-inlay) / 2))) - var(--fui-b)) calc(100% - var(--fui-b)), /*tr*/ 
            calc(calc(var(--fui-b-center) - calc(var(--fui-b-extend) + calc(var(--fui-border) / 2) + calc(var(--fui-inlay) / 2))) + var(--fui-b)) calc(100% - var(--fui-b)),   /*tl*/
            calc(var(--fui-b-center) - calc(var(--fui-b-extend) + calc(var(--fui-border) / 2) + calc(var(--fui-inlay) / 2))) 100%,  /*bl*/
            
            /*4. bl*/ 
            calc(var(--fui-bl) - calc(var(--fui-inlay) + var(--fui-border)) / 2) 100%, 
            0% calc(100% - calc(var(--fui-bl) - calc(var(--fui-inlay) + var(--fui-border)) / 2)), 

            /*l*/
            0% calc(var(--fui-l-center) + calc(var(--fui-l-extend) + calc(var(--fui-border) / 2) + calc(var(--fui-inlay) / 2))), /*bl*/
            var(--fui-l) calc(calc(var(--fui-l-center) + calc(var(--fui-l-extend) + calc(var(--fui-border) / 2) + calc(var(--fui-inlay) / 2))) - var(--fui-l)), /*br*/
            var(--fui-l) calc(calc(var(--fui-l-center) - calc(var(--fui-l-extend) + calc(var(--fui-border) / 2) + calc(var(--fui-inlay) / 2))) + var(--fui-l)), /*tr*/
            0% calc(var(--fui-l-center) - calc(var(--fui-l-extend) + calc(var(--fui-border) / 2) + calc(var(--fui-inlay) / 2))) /*tl*/
        );
        
        background: var(--fui-inlay-bg);
        pointer-events: none;
    }
    
    &::after{
        content: "";
        position: absolute;
        top: -0.5px;
        right: -0.5px;
        bottom: -0.5px;
        left: -0.5px;
        clip-path: polygon(
            0% 0%, /*1. outer tl*/ 
            100% 0%, /*2. outer tr*/ 
            100% 100%, /*3. outer br*/
            0% 100%, /*4. outer bl*/

            0% 18%, /*5. outer enter point tl*/
            var(--fui-border) 18%, /*6. inner enter point tr*/ 
            
            /*inner l*/
            var(--fui-border) calc(var(--fui-l-center) - calc(var(--fui-l-extend) + var(--fui-border) / 2)), /*tl*/
            calc(var(--fui-border) + var(--fui-l)) calc(var(--fui-l-center) - calc(calc(var(--fui-l-extend) + var(--fui-border) / 2) - var(--fui-l))), /*tr*/
            calc(var(--fui-border) + var(--fui-l)) calc(var(--fui-l-center) + calc(calc(var(--fui-l-extend) + var(--fui-border) / 2) - var(--fui-l))), /*br*/
            var(--fui-border) calc(var(--fui-l-center) + calc(var(--fui-l-extend) + var(--fui-border) / 2)), /*bl*/

            /*4.1 inner bl*/
            var(--fui-border) calc(100% - calc(var(--fui-bl) + var(--fui-border) / 2)),
            calc(var(--fui-bl) + var(--fui-border) / 2) calc(100% - var(--fui-border)),
            
            /*inner b*/
            calc(var(--fui-b-center) - calc(var(--fui-b-extend) + var(--fui-border) / 2)) calc(100% - var(--fui-border)), /*bl*/
            calc(var(--fui-b-center) - calc(calc(var(--fui-b-extend) + var(--fui-border) / 2) - var(--fui-b))) calc(100% - calc(var(--fui-border) + var(--fui-b))), /*tl*/
            calc(var(--fui-b-center) + calc(calc(var(--fui-b-extend) + var(--fui-border) / 2) - var(--fui-b))) calc(100% - calc(var(--fui-border) + var(--fui-b))), /*tr*/
            calc(var(--fui-b-center) + calc(var(--fui-b-extend) + var(--fui-border) / 2)) calc(100% - var(--fui-border)), /*br*/
             
            /*3.1 inner br*/
            calc(100% - calc(var(--fui-br) + var(--fui-border) / 2)) calc(100% - var(--fui-border)),
            calc(100% - var(--fui-border)) calc(100% - calc(var(--fui-br) + var(--fui-border) / 2)),
            
            /*inner r*/
            calc(100% - var(--fui-border)) calc(var(--fui-r-center) + calc(var(--fui-r-extend) + var(--fui-border) / 2)), /*br*/
            calc(100% - calc(var(--fui-border) + var(--fui-r))) calc(var(--fui-r-center) + calc(calc(var(--fui-r-extend) + var(--fui-border) / 2) - var(--fui-r))), /*bl*/
            calc(100% - calc(var(--fui-border) + var(--fui-r))) calc(var(--fui-r-center) - calc(calc(var(--fui-r-extend) + var(--fui-border) / 2) - var(--fui-r))), /*tl*/
            calc(100% - var(--fui-border)) calc(var(--fui-r-center) - calc(var(--fui-r-extend) + var(--fui-border) / 2)), /*tr*/
            
            /*2.1 inner tr*/
            calc(100% - var(--fui-border)) calc(var(--fui-tr) + var(--fui-border) / 2),
            calc(100% - calc(var(--fui-tr) + var(--fui-border) / 2)) var(--fui-border),
            
            /*inner t*/
            calc(var(--fui-t-center) + calc(var(--fui-t-extend) + var(--fui-border) / 2)) var(--fui-border), /*tr*/
            calc(var(--fui-t-center) + calc(calc(var(--fui-t-extend) + var(--fui-border) / 2) - var(--fui-t))) calc(var(--fui-border) + var(--fui-t)), /*br*/
            calc(var(--fui-t-center) - calc(calc(var(--fui-t-extend) + var(--fui-border) / 2) - var(--fui-t))) calc(var(--fui-border) + var(--fui-t)), /*bl*/
            calc(var(--fui-t-center) - calc(var(--fui-t-extend) + var(--fui-border) / 2)) var(--fui-border), /*tl*/
            
            /*1.1 inner tl*/
            calc(var(--fui-tl) + var(--fui-border) / 2) var(--fui-border),
            var(--fui-border) calc(var(--fui-tl) + var(--fui-border) / 2),
            
            var(--fui-border) 18%, /*7. inner exit point tr*/ 
            0% 18% /*8. outer exit point tr*/
        );
        background: var(--fui-border-bg);
        pointer-events: none;
    }
}
  
// Clip center with border
[fui-clip-border]{
    position: relative;
    clip-path: polygon(
        0% var(--fui-tl), var(--fui-tl) 0%, /*1. tl*/

        /*1.2 t*/
        calc(var(--fui-t-center) - var(--fui-t-extend)) 0%, /*1.2.1 tl*/
        calc(calc(var(--fui-t-center) - var(--fui-t-extend)) + var(--fui-t)) var(--fui-t), /*1.2.2 bl*/ 
        calc(calc(var(--fui-t-center) + var(--fui-t-extend)) - var(--fui-t)) var(--fui-t),  /*1.2.3 br*/
        calc(var(--fui-t-center) + var(--fui-t-extend)) 0%, /*1.2.4 tr*/

        calc(100% - var(--fui-tr)) 0%, 100% var(--fui-tr), /*2. tr*/

        /*2.1 r*/
        100% calc(var(--fui-r-center) - var(--fui-r-extend)), /*2.1.1 tr*/
        calc(100% - var(--fui-r)) calc(calc(var(--fui-r-center) - var(--fui-r-extend)) + var(--fui-r)), /*2.1.2 tl*/
        calc(100% - var(--fui-r)) calc(calc(var(--fui-r-center) + var(--fui-r-extend)) - var(--fui-r)), /*2.1.3 bl*/
        100% calc(var(--fui-r-center) + var(--fui-r-extend)), /*2.1.4 br*/ 

        100% calc(100% - var(--fui-br)), calc(100% - var(--fui-br)) 100%, /*3. br*/ 

        /*3.1 b*/
        calc(var(--fui-b-center) + var(--fui-b-extend)) 100%, /*3.2.1 br*/ 
        calc(calc(var(--fui-b-center) + var(--fui-b-extend)) - var(--fui-b)) calc(100% - var(--fui-b)), /*3.2.2 tr*/ 
        calc(calc(var(--fui-b-center) - var(--fui-b-extend)) + var(--fui-b)) calc(100% - var(--fui-b)),   /*3.2.3 tl*/
        calc(var(--fui-b-center) - var(--fui-b-extend)) 100%,  /*3.2.4 bl*/

        var(--fui-bl) 100%, 0 calc(100% - var(--fui-bl)), /*4. bl*/ 

        /*4.1 l*/
        0% calc(var(--fui-l-center) + var(--fui-l-extend)), /*4.1.1 bl*/
        var(--fui-l) calc(calc(var(--fui-l-center) + var(--fui-l-extend)) - var(--fui-l)), /*4.1.2 br*/
        var(--fui-l) calc(calc(var(--fui-l-center) - var(--fui-l-extend)) + var(--fui-l)), /*4.1.3 tr*/
        0% calc(var(--fui-l-center) - var(--fui-l-extend)) /*4.1.4 tl*/
    );
    
    &::after{
        content: "";
        position: absolute;
        top: -0.5px;
        right: -0.5px;
        bottom: -0.5px;
        left: -0.5px;
        clip-path: polygon(
            0% 0%, /*1. outer tl*/ 
            100% 0%, /*2. outer tr*/ 
            100% 100%, /*3. outer br*/
            0% 100%, /*4. outer bl*/

            0% 18%, /*5. outer enter point tl*/
            var(--fui-border) 18%, /*6. inner enter point tr*/ 
            
            /*inner l*/
            var(--fui-border) calc(var(--fui-l-center) - calc(var(--fui-l-extend) + var(--fui-border) / 2)), /*tl*/
            calc(var(--fui-border) + var(--fui-l)) calc(var(--fui-l-center) - calc(calc(var(--fui-l-extend) + var(--fui-border) / 2) - var(--fui-l))), /*tr*/
            calc(var(--fui-border) + var(--fui-l)) calc(var(--fui-l-center) + calc(calc(var(--fui-l-extend) + var(--fui-border) / 2) - var(--fui-l))), /*br*/
            var(--fui-border) calc(var(--fui-l-center) + calc(var(--fui-l-extend) + var(--fui-border) / 2)), /*bl*/

            /*4.1 inner bl*/
            var(--fui-border) calc(100% - calc(var(--fui-bl) + var(--fui-border) / 2)),
            calc(var(--fui-bl) + var(--fui-border) / 2) calc(100% - var(--fui-border)),
            
            /*inner b*/
            calc(var(--fui-b-center) - calc(var(--fui-b-extend) + var(--fui-border) / 2)) calc(100% - var(--fui-border)), /*bl*/
            calc(var(--fui-b-center) - calc(calc(var(--fui-b-extend) + var(--fui-border) / 2) - var(--fui-b))) calc(100% - calc(var(--fui-border) + var(--fui-b))), /*tl*/
            calc(var(--fui-b-center) + calc(calc(var(--fui-b-extend) + var(--fui-border) / 2) - var(--fui-b))) calc(100% - calc(var(--fui-border) + var(--fui-b))), /*tr*/
            calc(var(--fui-b-center) + calc(var(--fui-b-extend) + var(--fui-border) / 2)) calc(100% - var(--fui-border)), /*br*/
             
            /*3.1 inner br*/
            calc(100% - calc(var(--fui-br) + var(--fui-border) / 2)) calc(100% - var(--fui-border)),
            calc(100% - var(--fui-border)) calc(100% - calc(var(--fui-br) + var(--fui-border) / 2)),
            
            /*inner r*/
            calc(100% - var(--fui-border)) calc(var(--fui-r-center) + calc(var(--fui-r-extend) + var(--fui-border) / 2)), /*br*/
            calc(100% - calc(var(--fui-border) + var(--fui-r))) calc(var(--fui-r-center) + calc(calc(var(--fui-r-extend) + var(--fui-border) / 2) - var(--fui-r))), /*bl*/
            calc(100% - calc(var(--fui-border) + var(--fui-r))) calc(var(--fui-r-center) - calc(calc(var(--fui-r-extend) + var(--fui-border) / 2) - var(--fui-r))), /*tl*/
            calc(100% - var(--fui-border)) calc(var(--fui-r-center) - calc(var(--fui-r-extend) + var(--fui-border) / 2)), /*tr*/
            
            /*2.1 inner tr*/
            calc(100% - var(--fui-border)) calc(var(--fui-tr) + var(--fui-border) / 2),
            calc(100% - calc(var(--fui-tr) + var(--fui-border) / 2)) var(--fui-border),
            
            /*inner t*/
            calc(var(--fui-t-center) + calc(var(--fui-t-extend) + var(--fui-border) / 2)) var(--fui-border), /*tr*/
            calc(var(--fui-t-center) + calc(calc(var(--fui-t-extend) + var(--fui-border) / 2) - var(--fui-t))) calc(var(--fui-border) + var(--fui-t)), /*br*/
            calc(var(--fui-t-center) - calc(calc(var(--fui-t-extend) + var(--fui-border) / 2) - var(--fui-t))) calc(var(--fui-border) + var(--fui-t)), /*bl*/
            calc(var(--fui-t-center) - calc(var(--fui-t-extend) + var(--fui-border) / 2)) var(--fui-border), /*tl*/
            
            /*1.1 inner tl*/
            calc(var(--fui-tl) + var(--fui-border) / 2) var(--fui-border),
            var(--fui-border) calc(var(--fui-tl) + var(--fui-border) / 2),
            
            var(--fui-border) 18%, /*7. inner exit point tr*/ 
            0% 18% /*8. outer exit point tr*/
        );
        background-color: var(--fui-border-bg);
        pointer-events: none;
    }
}

// Clip center with inlay
[fui-clip-inlay]{
    position: relative;
    clip-path: polygon(
        0% var(--fui-tl), var(--fui-tl) 0%, /*1. tl*/

        /*1.2 t*/
        calc(var(--fui-t-center) - var(--fui-t-extend)) 0%, /*1.2.1 tl*/
        calc(calc(var(--fui-t-center) - var(--fui-t-extend)) + var(--fui-t)) var(--fui-t), /*1.2.2 bl*/ 
        calc(calc(var(--fui-t-center) + var(--fui-t-extend)) - var(--fui-t)) var(--fui-t),  /*1.2.3 br*/
        calc(var(--fui-t-center) + var(--fui-t-extend)) 0%, /*1.2.4 tr*/

        calc(100% - var(--fui-tr)) 0%, 100% var(--fui-tr), /*2. tr*/

        /*2.1 r*/
        100% calc(var(--fui-r-center) - var(--fui-r-extend)), /*2.1.1 tr*/
        calc(100% - var(--fui-r)) calc(calc(var(--fui-r-center) - var(--fui-r-extend)) + var(--fui-r)), /*2.1.2 tl*/
        calc(100% - var(--fui-r)) calc(calc(var(--fui-r-center) + var(--fui-r-extend)) - var(--fui-r)), /*2.1.3 bl*/
        100% calc(var(--fui-r-center) + var(--fui-r-extend)), /*2.1.4 br*/ 

        100% calc(100% - var(--fui-br)), calc(100% - var(--fui-br)) 100%, /*3. br*/ 

        /*3.1 b*/
        calc(var(--fui-b-center) + var(--fui-b-extend)) 100%, /*3.2.1 br*/ 
        calc(calc(var(--fui-b-center) + var(--fui-b-extend)) - var(--fui-b)) calc(100% - var(--fui-b)), /*3.2.2 tr*/ 
        calc(calc(var(--fui-b-center) - var(--fui-b-extend)) + var(--fui-b)) calc(100% - var(--fui-b)),   /*3.2.3 tl*/
        calc(var(--fui-b-center) - var(--fui-b-extend)) 100%,  /*3.2.4 bl*/

        var(--fui-bl) 100%, 0 calc(100% - var(--fui-bl)), /*4. bl*/ 

        /*4.1 l*/
        0% calc(var(--fui-l-center) + var(--fui-l-extend)), /*4.1.1 bl*/
        var(--fui-l) calc(calc(var(--fui-l-center) + var(--fui-l-extend)) - var(--fui-l)), /*4.1.2 br*/
        var(--fui-l) calc(calc(var(--fui-l-center) - var(--fui-l-extend)) + var(--fui-l)), /*4.1.3 tr*/
        0% calc(var(--fui-l-center) - var(--fui-l-extend)) /*4.1.4 tl*/
    );

    &::before{
        content: "";
        position: absolute;
        z-index: -1;
        top: var(--fui-inlay);
        right: var(--fui-inlay);
        bottom: var(--fui-inlay);
        left: var(--fui-inlay);
        
        clip-path: polygon(
            /*1. tl*/ 
            0% calc(var(--fui-tl) - var(--fui-inlay) / 2),
            calc(var(--fui-tl) - var(--fui-inlay) / 2) 0%, 
            
            /*t*/
            calc(var(--fui-t-center) - calc(var(--fui-t-extend) + calc(var(--fui-inlay) / 2))) 0%, /*tl*/
            calc(calc(var(--fui-t-center) - calc(var(--fui-t-extend) + calc(var(--fui-inlay) / 2))) + var(--fui-t)) var(--fui-t), /*bl*/ 
            calc(calc(var(--fui-t-center) + calc(var(--fui-t-extend) + calc(var(--fui-inlay) / 2))) - var(--fui-t)) var(--fui-t),  /*br*/
            calc(var(--fui-t-center) + calc(var(--fui-t-extend) + calc(var(--fui-inlay) / 2))) 0%, /*tr*/
            
            /*2. tr*/ 
            calc(100% - calc(var(--fui-tr) - var(--fui-inlay) / 2)) 0%,
            100% calc(var(--fui-tr) - var(--fui-inlay) / 2), 

            /*r*/
            100% calc(var(--fui-r-center) - calc(var(--fui-r-extend) + calc(var(--fui-inlay) / 2))), /*tr*/
            calc(100% - var(--fui-r)) calc(calc(var(--fui-r-center) - calc(var(--fui-r-extend) + calc(var(--fui-inlay) / 2))) + var(--fui-r)), /*tl*/
            calc(100% - var(--fui-r)) calc(calc(var(--fui-r-center) + calc(var(--fui-r-extend) + calc(var(--fui-inlay) / 2))) - var(--fui-r)), /*bl*/
            100% calc(var(--fui-r-center) + calc(var(--fui-r-extend) + calc(var(--fui-inlay) / 2))), /*br*/ 

            /*3. br*/ 
            100% calc(100% - calc(var(--fui-br) - var(--fui-inlay) / 2)),
            calc(100% - calc(var(--fui-br) - var(--fui-inlay) / 2)) 100%,

            /*3.1 b*/
            calc(var(--fui-b-center) + calc(var(--fui-b-extend) + calc(var(--fui-inlay) / 2))) 100%, /*br*/ 
            calc(calc(var(--fui-b-center) + calc(var(--fui-b-extend) + calc(var(--fui-inlay) / 2))) - var(--fui-b)) calc(100% - var(--fui-b)), /*tr*/ 
            calc(calc(var(--fui-b-center) - calc(var(--fui-b-extend) + calc(var(--fui-inlay) / 2))) + var(--fui-b)) calc(100% - var(--fui-b)),   /*tl*/
            calc(var(--fui-b-center) - calc(var(--fui-b-extend) + calc(var(--fui-inlay) / 2))) 100%,  /*bl*/
            
            /*4. bl*/ 
            calc(var(--fui-bl) - var(--fui-inlay) / 2) 100%, 
            0% calc(100% - calc(var(--fui-bl) - var(--fui-inlay) / 2)), 

            /*l*/
            0% calc(var(--fui-l-center) + calc(var(--fui-l-extend) + calc(var(--fui-inlay) / 2))), /*bl*/
            var(--fui-l) calc(calc(var(--fui-l-center) + calc(var(--fui-l-extend) + calc(var(--fui-inlay) / 2))) - var(--fui-l)), /*br*/
            var(--fui-l) calc(calc(var(--fui-l-center) - calc(var(--fui-l-extend) + calc(var(--fui-inlay) / 2))) + var(--fui-l)), /*tr*/
            0% calc(var(--fui-l-center) - calc(var(--fui-l-extend) + calc(var(--fui-inlay) / 2))) /*tl*/
        );
        
        background: var(--fui-inlay-bg);
        pointer-events: none;
    }
}

// Clip with center
[fui-clip]{
    position: relative;
    clip-path: polygon(
        0% var(--fui-tl), var(--fui-tl) 0%, /*1. tl*/

        /*t*/
        calc(var(--fui-t-center) - var(--fui-t-extend)) 0%, /*tl*/
        calc(calc(var(--fui-t-center) - var(--fui-t-extend)) + var(--fui-t)) var(--fui-t), /*bl*/ 
        calc(calc(var(--fui-t-center) + var(--fui-t-extend)) - var(--fui-t)) var(--fui-t),  /*br*/
        calc(var(--fui-t-center) + var(--fui-t-extend)) 0%, /*tr*/

        calc(100% - var(--fui-tr)) 0%, 100% var(--fui-tr), /*2. tr*/

        /*r*/
        100% calc(var(--fui-r-center) - var(--fui-r-extend)), /*tr*/
        calc(100% - var(--fui-r)) calc(calc(var(--fui-r-center) - var(--fui-r-extend)) + var(--fui-r)), /*tl*/
        calc(100% - var(--fui-r)) calc(calc(var(--fui-r-center) + var(--fui-r-extend)) - var(--fui-r)), /*bl*/
        100% calc(var(--fui-r-center) + var(--fui-r-extend)), /*br*/ 

        100% calc(100% - var(--fui-br)), calc(100% - var(--fui-br)) 100%, /*3. br*/ 

        /*b*/
        calc(var(--fui-b-center) + var(--fui-b-extend)) 100%, /*br*/ 
        calc(calc(var(--fui-b-center) + var(--fui-b-extend)) - var(--fui-b)) calc(100% - var(--fui-b)), /*tr*/ 
        calc(calc(var(--fui-b-center) - var(--fui-b-extend)) + var(--fui-b)) calc(100% - var(--fui-b)),   /*tl*/
        calc(var(--fui-b-center) - var(--fui-b-extend)) 100%,  /*bl*/

        var(--fui-bl) 100%, 0 calc(100% - var(--fui-bl)), /*4. bl*/ 

        /*l*/
        0% calc(var(--fui-l-center) + var(--fui-l-extend)), /*bl*/
        var(--fui-l) calc(calc(var(--fui-l-center) + var(--fui-l-extend)) - var(--fui-l)), /*br*/
        var(--fui-l) calc(calc(var(--fui-l-center) - var(--fui-l-extend)) + var(--fui-l)), /*tr*/
        0% calc(var(--fui-l-center) - var(--fui-l-extend)) /*tl*/
    );
}

// Clip with Border & inlay
[fui-both]{
    position: relative;
    clip-path: polygon(
        0% 0%, 
        100% 0%,
        100% 100%, 
        0% 100%
    );

    &::before{
        content: "";
        position: absolute;
        z-index: -1;
        top: calc(var(--fui-inlay) + var(--fui-border));
        right: calc(var(--fui-inlay) + var(--fui-border));
        bottom: calc(var(--fui-inlay) + var(--fui-border));
        left: calc(var(--fui-inlay) + var(--fui-border));
        clip-path: polygon(
            /*tl*/ 
            0% calc(var(--fui-tl) - calc(var(--fui-inlay) + var(--fui-border)) / 2),
            calc(var(--fui-tl) - calc(var(--fui-inlay) + var(--fui-border)) / 2) 0%,

            /*tr*/ 
            calc(100% - calc(var(--fui-tr) - calc(var(--fui-inlay) + var(--fui-border)) / 2)) 0%,
            100% calc(var(--fui-tr) - calc(var(--fui-inlay) + var(--fui-border)) / 2),

            /*br*/ 
            100% calc(100% - calc(var(--fui-br) - calc(var(--fui-inlay) + var(--fui-border)) / 2)),
            calc(100% - calc(var(--fui-br) - calc(var(--fui-inlay) + var(--fui-border)) / 2)) 100%,

            /*bl*/ 
            calc(var(--fui-bl) - calc(var(--fui-inlay) + var(--fui-border)) / 2) 100%,
            0% calc(100% - calc(var(--fui-bl) - calc(var(--fui-inlay) + var(--fui-border)) / 2)),
        );
        
        background: var(--fui-inlay-bg);
        pointer-events: none;
    }

    &::after{
        content: "";
        position: absolute;
        top: -0.5px;
        right: -0.5px;
        bottom: -0.5px;
        left: 0;
        clip-path: polygon(
            0% 0%, /*1. outer tl*/
            100% 0%,  /*2. outer tr*/
            100% 100%, /*3. outer br*/
            0% 100%, /*4. outer bl*/
            0% 0%,  /*5. outer tl*/

            var(--fui-border) calc(var(--fui-tl) + var(--fui-border) / 2), /*1. inner tl */

            var(--fui-border) calc(100% - calc(var(--fui-bl) + var(--fui-border) / 2)), /*2. inner bl */
            calc(var(--fui-bl) + var(--fui-border) / 2) calc(100% - var(--fui-border)), /*2.1 inner bl */

            calc(100% - calc(var(--fui-br) + var(--fui-border) / 2)) calc(100% - var(--fui-border)), /*3. inner br */ 
            calc(100% - var(--fui-border)) calc(100% - calc(var(--fui-br) + var(--fui-border) / 2)), /*3.1 inner br */ 

            calc(100% - var(--fui-border)) calc(var(--fui-tr) + var(--fui-border) / 2), /*4. inner tr */ 
            calc(100% - calc(var(--fui-tr) + var(--fui-border) / 2)) var(--fui-border), /*4.1 inner tr */ 

            calc(var(--fui-tl) + var(--fui-border) / 2) var(--fui-border), /*5. inner tl */ 
            var(--fui-border) calc(var(--fui-tl) + var(--fui-border) / 2), /*1.1 inner tl */ 
        );
        background: var(--fui-border-bg);
        pointer-events: none;
    }
}

// Clip Corner with Border
[fui-border]{
    position: relative;
    &::after{
        content: "";
        position: absolute;
        top: -0.25px;
        right: -0.25px;
        bottom: -0.25px;
        left: -0.25px;
        clip-path: polygon(
            0% 0%, /*1. outer tl*/
            100% 0%,  /*2. outer tr*/
            100% 100%, /*3. outer br*/
            0% 100%, /*4. outer bl*/
            0% 0%,  /*5. outer tl*/

            var(--fui-border) calc(var(--fui-tl) + var(--fui-border) / 2), /*1. inner tl */

            var(--fui-border) calc(100% - calc(var(--fui-bl) + var(--fui-border) / 2)), /*2. inner bl */
            calc(var(--fui-bl) + var(--fui-border) / 2) calc(100% - var(--fui-border)), /*2.1 inner bl */

            calc(100% - calc(var(--fui-br) + var(--fui-border) / 2)) calc(100% - var(--fui-border)), /*3. inner br */ 
            calc(100% - var(--fui-border)) calc(100% - calc(var(--fui-br) + var(--fui-border) / 2)), /*3.1 inner br */ 

            calc(100% - var(--fui-border)) calc(var(--fui-tr) + var(--fui-border) / 2), /*4. inner tr */ 
            calc(100% - calc(var(--fui-tr) + var(--fui-border) / 2)) var(--fui-border), /*4.1 inner tr */ 

            calc(var(--fui-tl) + var(--fui-border) / 2) var(--fui-border), /*5. inner tl */ 
            var(--fui-border) calc(var(--fui-tl) + var(--fui-border) / 2), /*1.1 inner tl */ 
        );
        background: var(--fui-border-bg);
        pointer-events: none;
    }
}

// Clip Corner with Inlay
[fui-inlay]{
    position: relative;
    &::before{
        content: "";
        position: absolute;
        z-index: -1;
        top: var(--fui-inlay);
        right: var(--fui-inlay);
        bottom: var(--fui-inlay);
        left: var(--fui-inlay);
        clip-path: polygon(
            /*tl*/
            0% calc(var(--fui-tl) - var(--fui-inlay) / 2),
            calc(var(--fui-tl) - var(--fui-inlay) / 2) 0%,
            
            /*tr*/
            calc(100% - calc(var(--fui-tr) - var(--fui-inlay) / 2)) 0%,
             100% calc(var(--fui-tr) - var(--fui-inlay) / 2),
    
            /*br*/
            100% calc(100% - calc(var(--fui-br) - var(--fui-inlay) / 2)),
            calc(100% - calc(var(--fui-br) - var(--fui-inlay) / 2)) 100%,
    
            /*bl*/
            calc(var(--fui-bl) - var(--fui-inlay) / 2) 100%,
            0% calc(100% - calc(var(--fui-bl) - var(--fui-inlay) / 2)),
        );
        background: var(--fui-inlay-bg);
        pointer-events: none;
    }
}

//FUI Corner start
[fui-corner]{
    position: relative;
    clip-path: polygon(
        var(--fui-tl) 0%, 
        
        calc(100% - var(--fui-tr)) 0%, 100% var(--fui-tr), 

        100% calc(100% - var(--fui-br)), calc(100% - var(--fui-br)) 100%, 

        var(--fui-bl) 100%, 0% calc(100% - var(--fui-bl)), 
        
        0% var(--fui-tl)
    ) !important;
}