@import "../variables";
@import "../mixins";

$status_icon_size: 10px;

.StatusIcon {
    box-sizing: border-box;
    display: inline-block;
    height: $icon-default-size;
    padding: ($icon-default-size - $status_icon_size) / 2;
    position: relative;
    text-align: center;
    vertical-align: top;
    width: $icon-default-size;
}

.StatusIcon-icon {
    border-radius: $status_icon_size / 2;
    display: inline-block;
    height: $status_icon_size;
    vertical-align: top;
    width: $status_icon_size;

    .StatusIcon-success & {
        background: $color_success;
    }

    .StatusIcon-danger & {
        background: $color_danger;
    }

    .StatusIcon-invalid & {
        background: $color_invalid;
    }

    .StatusIcon-warning & {
        background: $color_warning;
    }

    .StatusIcon-attention & {
        background: $color_await;
    }
}