.sgds{
    &-file-upload{
        .sgds-input-file{
            position: absolute;
            overflow: hidden;
            width: 0.1px;
            height: 0.1px;
            opacity:0;
            z-index:-1;
            + .sgds-file-label{
                font-size: $size-normal;
                color: black;
                background-color: hsl(0,0%,90%);
                display: inline-block; 
                padding: $button-padding-vertical $button-padding-horizontal ;
                border: 1px solid  hsl(0,0%,90%);
                i{
                    color: black;
                    margin-right: 0.625rem;
                }
                &:hover{
                    background-color: hsl(0,0%,75%);
                    cursor: pointer;
                }
            }
        }
        @each $name, $pair in $colors {
            $color: nth($pair, 1);
            $color-invert: nth($pair, 2); 
            &.is-#{$name} {
                .sgds-file-label {
                    background-color: $color;
                    color: $color-invert;
                    @if $name == 'warning'{
                        color: black;
                    }
                    border-color: $color;
                    .sgds-icon{
                        color: $color-invert;
                        @if $name == 'warning'{
                            color: black;
                        }
                    }
                    &:hover,
                    &.is-hovered {
                        background-color: darken($color, 8%);
                        border-color: transparent;
                        color: $color-invert;
                        
                        @if $name == 'warning' {
                            color: black;
                        }
                    }
                }
            }
        }
        &-selectedFiles{
            border: 1px solid hsl(0,0%,99%);
            display: hidden;
            visibility:hidden;
            &.hasFiles{
                margin-top: 1rem;
                display: block;
                visibility:visible;
                padding: $button-padding-vertical $button-padding-horizontal;
            }
        }
    }
}