@import "../variables";
@import "../colors";

.Warning {
    border-radius: $border_radius_main;
    display: flex;
    margin-bottom: $offset_main * 2;
    padding: $offset_main * 1.5;
    text-align: left;
    width: 100%;

    &-type-error {
        background: $color_danger_auxilliary;
        color: $color_danger;
    }

    &-type-danger-warning {
        background: $color_danger_warning_auxilliary;
        color: $color_danger_warning;
    }

    &-type-warning {
        background: $color_warning_auxilliary;
        color: $color_dark_text;
    }

    &-type-success {
        background: $color_success_auxilliary;
        color: $color_success;
    }

    &-type-info {
        background: $color_info_auxilliary;
        color: $color_info;
    }

    &-hidden {
        display: none;
    }
}

.Warning-icon-wrapper,
.Warning-content {
    vertical-align: top;
}

.Warning-content {
    flex-grow: 1;
    position: relative;
}

.Warning-icon-wrapper {
    float: left;
    padding-right: $offset_main * 1.5;

    .Warning-type-warning & {
        color: $color_warning;
    }
}

.Warning-title {
    font-size: $font_size_default;
    font-weight: $weight_bold;
    line-height: $line_height_default;
}

.Warning-description {
    font-size: $font_size_small;
    line-height: $line_height_control;
    margin-top: 1px;
    text-align: left;
}

.Warning-paragraph {
    & + & {
        margin-top: $offset_main * .5;
    }
}