@use'../variables' as*;

.fui-line-shape{
    height: 9px;
    clip-path: polygon(
        0% 100%, /*1*/ 
        calc(100% - 10px) 100%, /*2*/

        100% calc(100% - 9px), /*3*/
        calc(100% - 25px) calc(100% - 9px), /*4*/

        calc(100% - 28px) calc(100% - 6px), /*5*/
        calc(100% - 48px) calc(100% - 6px), /*6*/

        calc(100% - 51px) calc(100% - 3px), /*7*/
        calc(100% - 81px) calc(100% - 3px), /*8*/
        
        calc(100% - 84px) calc(100% - 1px), /*9*/ 
        0%  calc(100% - 1px) /*10*/ 
    );
}

// Shape trinagle & trapezoid
$trapezoid-sizes: ( 2:2, 3:3, 4: 4, 8: 8, 10: 10, 12: 12, 16: 16, 20: 20, 24: 24, 32: 32, 48: 48, 64: 64, 80: 80, 96: 96, 112: 112 );
@each $key, $value in $trapezoid-sizes {
    .fui-triangle-tl-#{$key} {
        border-top: $value+px solid;
        border-right: $value+px solid transparent;
    }
    .fui-triangle-tr-#{$key} {
        border-top: $value+px solid;
        border-left: $value+px solid transparent;
    }
    .fui-triangle-br-#{$key} {
        border-bottom: $value+px solid;
        border-left: $value+px solid transparent;
    }
    .fui-triangle-bl-#{$key} {
        border-bottom: $value+px solid;
        border-right: $value+px solid transparent;
    }
    .fui-triangle-t-#{$key} {
        border-left: $value+px solid transparent;
        border-right: $value+px solid transparent;
        border-bottom: $value+px solid;
    }
    .fui-triangle-r-#{$key} {
        border-top: $value+px solid transparent;
        border-left: $value+px solid;
        border-bottom: $value+px solid transparent;
    }
    .fui-triangle-b-#{$key} {
        border-left: $value+px solid transparent;
        border-right: $value+px solid transparent;
        border-top: $value+px solid;
    }
    .fui-triangle-l-#{$key} {
        border-top: $value+px solid transparent;
        border-right: $value+px solid;
        border-bottom: $value+px solid transparent;
    }

    .fui-shap-trapezoid-t-#{$key} {
        border-bottom: $value+px solid;
        border-left: $value+px solid transparent;
        border-right: $value+px solid transparent;
    }
    .fui-shap-trapezoid-b-#{$key} {
        border-top: $value+px solid;
        border-left: $value+px solid transparent;
        border-right: $value+px solid transparent;
    }
    .fui-shap-trapezoid-s-#{$key} {
        border-left: $value+px solid;
        border-top: $value+px solid transparent;
        border-bottom: $value+px solid transparent;
    }
    .fui-shap-trapezoid-e-#{$key} {
        border-right: $value+px solid;
        border-top: $value+px solid transparent;
        border-bottom: $value+px solid transparent;
    }
    .fui-trapezoid-w-#{$key}px{
        width: $value+px;
    }
    .fui-trapezoid-h-#{$key}px{
        height: $value+px;
    }
}

$trapezoid-width: ( 10: 10%, 25: 25%, 50: 50%, 75: 75%);
@each $key, $value in $trapezoid-width {
    .fui-trapezoid-w-#{$key}{
        width: calc($value + 6px);
    }
    .fui-trapezoid-h-#{$key}{
        height: calc($value + 6px);
    }
}