// ---- LIGHT-THEME-------
html {
    background-color: $backgroundColorLight;
    color: $fontColorLight;
    @if($bodyImgLight != "") {
        background-image: url($bodyImgLight);
    }
    
    header .logo {
        background-image: url($logoImgLight);
    }

    h1, h2 {
        color: $fontColorLight;
    }

    button, .button {
        background-color: $backgroundColorLight;
        color: $primaryColorLight;
        border: 1px solid $primaryColorLight;

        &:hover {
            background-color: $primaryColorHoverLight;
            border: 1px solid $primaryColorHoverLight;
            color: $buttonBackgroundColorHoverLight
        }

        &.primary {
            background-color: $primaryColor;
            color: $buttonBackgroundColorHoverLight;
            border: none;
            box-shadow: 0px 10px 30px $primaryColor;
            &:hover {
                background-color: $primaryColorHover;
            }
        }

        &:disabled {
            background-color: $inputBorderColor;
            border: 1px solid $inputBorderColor;

            &:hover {
                background-color: $inputBorderColor;
                border: 1px solid $inputBorderColor;
            }
        }

        &.clean {
            color: $fontColorLight;

            &:hover {
                border: none;
                background-color: $buttonBackgroundColorHoverLight;
            }
        }

        &.user-selection {
            .profile-image {
                @include retina-background-image($profileImgLight, "png", false, 80px, 80px);
            }

            &:hover {
                background-color: $buttonBackgroundColorHoverLight;

                .profile-image {
                    @include retina-background-image($profileImgLight, "png", true, 80px, 80px);
                }
            }
        }

        &.other-user {
            .other-user-image {
                @include retina-background-image($otherUserImgLight, "png", false, 80px, 60px);
            }

            &:hover {
                .other-user-image {
                    @include retina-background-image($otherUserImgLight, "png", true, 80px, 60px);
                }
            }
        }
    }

    input:not([type='radio']), select {
        background-color: $inputBackgroundColorLight;
        color: $fontColorLight;
    }

    #qrcode {
        svg rect.color {
            fill: $fontColorLight;
        }

        svg rect.bg-color {
            fill: $backgroundColorLight;
        }
    }

    footer {
        @if($footerimgLight != "") {
            background-image: url($footerimgLight);
        }
    }
}

form {
    .field.check-box label {
        color: $fontColorLight;
    }

 ul#passwordcomplexity li {
     i {
         color: $okColorLight;
     }

     &.invalid {
         i {
             color: $nokColorLight;
         }
     }
 }
}


%profile-image {
    .profile-image {
        @include retina-background-image($profileImgLight, "png", false, 80px, 80px);
    }

    &:hover .profile-image {
        @include retina-background-image($profileImgLight, "png", true, 80px, 80px);
    }
}

.free-tier {
    border: 2px solid $nokColorLight;
}

.error {
    color: $nokColorLight;
}