$border-size: 1px;
$icon-size: 34px;
$padding: 8px;

$success-color: #7ADE81;
$warning-color: #F5A623;
$error-color: #FD777E;
$empty-color: #7ADE81;

$line-color: #D2D9E1;

:host {
    display: block;
    position: relative;
    width: 100%;
    padding: 0 $padding $padding ($icon-size + $padding);
    line-height: $icon-size;
    min-height: 60px;

    &::after {
        position: absolute;
        top: ($icon-size + $padding);
        bottom: $padding;
        left: ($icon-size/2);
        width: 1px;
        background: $line-color;
        content: '';
    }

    .icon-container {
        position: absolute;
        box-sizing: border-box;
        left: 0px;
        top: 0px;

        width: $icon-size;
        height: $icon-size;
        
        border-width: $border-size;
        border-style: solid;
        border-radius: 100%;
        
        mat-icon {
            line-height: ($icon-size - $border-size);
            display: block;
            margin: auto;
        }

        &.success {
            border-color: $success-color;
            
            mat-icon {
                color: $success-color;
            }
        }

        &.warning {
            border-color: $warning-color;
            
            mat-icon {
                color: $warning-color;
            }
        }

        &.error {
            border-color: $error-color;
            
            mat-icon {
                color: $error-color;
            }
        }

        &.empty {
            border-color: $empty-color;
            opacity: .7;
        }
    }
}