@use'../variables' as*;

//Text color
.fui-hover-text{
    &-primary{
        &:hover{
            color: $primary !important;
        }
    }
    &-secondary{
        &:hover{
            color: $secondary !important;
        }
    }
    &-warning{
        &:hover{
            color: $warning !important;
        }
    }
    &-danger{
        &:hover{
            color: $danger !important;
        }
    }
    &-success{
        &:hover{
            color: $success !important;
        }
    }
    &-info{
        &:hover{
            color: $info !important;
        }
    }
    &-white{
        &:hover{
            color: $white !important;
        }
    }
    &-black{
        &:hover{
            color: $black !important;
        }
    }
}

//Background color
.fui-hover-bg{
    &-primary{
        &:hover{
            background-color: $primary !important;
        }
    }
    &-secondary{
        &:hover{
            background-color: $secondary !important;
        }
    }
    &-warning{
        &:hover{
            background-color: $warning !important;
        }
    }
    &-danger{
        &:hover{
            background-color: $danger !important;
        }
    }
    &-success{
        &:hover{
            background-color: $success !important;
        }
    }
    &-info{
        &:hover{
            background-color: $info !important;
        }
    }
    &-white{
        &:hover{
            background-color: $white !important;
        }
    }
    &-black{
        &:hover{
            background-color: $black !important;
        }
    }
}

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


// Focus
.fui-no-focus{
    &:focus{
        outline: 0;
    }
}


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

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