.wk-alerts{

    position: fixed;
    top: 100px;
    right: 0;
    z-index: 2500;

    padding-right: 15px;

    @include screen('sm'){
        width: 100%;
        padding-left: 15px;
    }

    &__alert{
        margin-bottom: 15px;
        padding: 10px 15px;
        border-radius: 5px;
        background-color: $primary;
        color: #fff;

        display: flex;
        align-items: center;

        width: 375px;

        transition: all .5s ease;

        @include screen('sm'){
            width: 100%;
        }

        &--error{
            background-color: $danger;

            .wk-alerts__close span{
                background-color: #de8188;
            }
        }

        &--success{
            background-color: $success;

            .wk-alerts__close span{
                background-color: #8fdca1;
            }
        }

        &--info{
            background-color: $info;

            .wk-alerts__close span{
                background-color: #7ac5ff;
            }
        }
    }

    &__cta{
        width: 28px;
        padding: 5px 0 5px 15px;
        cursor: pointer;
    }

    &__text{
        width: calc(100% - 28px);
        padding: 5px 15px 5px 0;
        border-right: 1px solid rgba(#fff, 0.1);
        // opacity: .4;
    }

    &__close{
        border: none;
        outline: none;
        display: block;
        width: 100%;
        padding: 0;
        padding-bottom: 100%;
        background-color: transparent;
        position: relative;

        cursor: pointer;

        span{
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 2px;
            border-radius: 1px;
            background-color: #6e748e;
            // opacity: .4;

            &:nth-child(1){
                transform: translateY(-50%) rotate(45deg);
            }
            &:nth-child(2){
                transform: translateY(-50%) rotate(-45deg);
            }
        }
    }
}