@import '../../../../../assets/styles/index.scss';

.gen-msg {
    @include rem(border-radius, 2px);
    @include rem(margin-top, 15px);
    @include rem(margin-bottom, 15px);
    @include box-shadow;
    background: $color-white;
    position: relative;
    border-left: 0 solid;
    border-right: 0 solid;
    word-wrap: break-word;

    &__box{
        display: flex;
        .gen-msg__error &{
            background-color: $error;
        }
        
        .gen-msg__warning &{
            background-color:  $warning;
        }

        .gen-msg__notification &{
            background-color: $warning;
        }

        .gen-msg__success &{
            background-color: $success;
        }
    }

    &__box-left{
        @include rem(width, 6px);
        @include rem(border-radius, 2px 0 0 2px);
        float: left;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }



    &__box-right{
        @include rem(min-width, 6px);
        @include rem(border-radius, 0 2px 2px 0);
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        box-sizing: border-box;
    }

    &__text {
        @include rem(padding, 10px 60px 10px 23px);
        @include rem(font-size, 14px);
        @include rem(border-radius, 2px);
        @include line-height(16px, 12px);
        font-family: 'DaimlerCS', sans-serif;
        word-wrap: break-word;
        border: 1px solid $color-light-gray3;
        border-right: 0;
        border-left: 0;
        box-sizing: border-box;
        margin: 0;
        color: $color-dark-gray2;	
    }
   
    &__icon {
        @include rem(font-size, 10px);
        @include rem(padding, 10px);
        margin: auto;
        color: $color-white;
        cursor: pointer;
        display: flex;
        align-items: center;
    }
}

