@use'../variables' as*;

// Outline size & offset variable
$outline-size: ( 1:1, 2:2, 3:3, 4:4, 5:5, 6:6, 7:7, 8:8, 9:9, 10:10);

//Outline size
.fui-outline{
    outline: 1px solid;
}
@each $key, $value in $outline-size {
    .fui-outline-#{$key}{
        outline-width: $value+px;
    }
    
}

//Outline offset
@each $key, $value in $outline-size {
    .fui-outline-offset-#{$key}{
        outline-offset: $value+px;
    }
    
}

//Outline color
.fui-outline{
    &-primary{
        outline-color:#{rgba($color: $primary, $alpha: 1.0)}; 
    }
    &-secondary{
        outline-color:#{rgba($color: $secondary, $alpha: 1.0)}; 
    }
    &-success{
        outline-color:#{rgba($color: $success, $alpha: 1.0)}; 
    }
    &-warning{
        outline-color:#{rgba($color: $warning, $alpha: 1.0)}; 
    }
    &-danger{
        outline-color:#{rgba($color: $danger, $alpha: 1.0)}; 
    }
    &-white{
        outline-color:#{rgba($color: $white, $alpha: 1.0)};  
    }
    &-black{
        outline-color:#{rgba($color: $black, $alpha: 1.0)};  
    }
}

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

//Outline type
.fui-outline{
    &-solid{
        outline-style: solid;
    }
    &-dotted{
        outline-style: dotted;
    }
    &-dashed{
        outline-style: dashed;
    }
    &-double{
        outline-style: double;
    }
}