.uni-alert {
    padding: $basic-padding / 2;
    background-color: $color-grey-lighter;
    color: $color-grey-dark;
    position: relative;
    transition: opacity ease 200ms;
    opacity: 1;

    &__close {
        position: absolute;
        right: $basic-padding / 4;
        top: $basic-padding / 4;
        cursor: pointer;
    }

    &__icon {
        position: absolute;
        left: $basic-padding / 2;
        top: $basic-padding / 2;
    }

    &__content {

        &--with-icon {
            padding-left: $basic-padding;
        }

        &--closable {
            padding-right: $basic-padding;
        }
    }

    &--primary {
        color: $color-primary-dark;
        background-color: $color-primary-lighter;
    }

    &--warning {
        color: $color-warning-dark;
        background-color: $color-warning-lighter;
    }

    &--success {
        color: $color-success-dark;
        background-color: $color-success-lighter;
    }

    &--error {
        color: $color-error-dark;
        background-color: $color-error-lighter;
    }
}