<input type="checkbox" id="flash-message-status-1" class="a-flash-message__status" checked="checked">

<div class="a-flash-message a-flash-message--1 a-flash-message--success" style="animation: none; display: inline-flex; float: none">
	<span class="a-flash-message__icon"></span>

	Content of success notice

	<label for="flash-message-status-1" class="a-flash-message__close" aria-label="<?php echo $tx['close']; ?>">&#10005;</label>
</div>

<div class="clearfix"></div>

<input type="checkbox" id="flash-message-status-2" class="a-flash-message__status" checked="checked">

<div class="a-flash-message a-flash-message--2 a-flash-message--error" style="animation: none; display: inline-flex; float: none">
	<span class="a-flash-message__icon"></span>

	Content of error notice

	<label for="flash-message-status-2" class="a-flash-message__close" aria-label="<?php echo $tx['close']; ?>">&#10005;</label>
</div>

.a-flash-message {

    $self: &;

    @include flash-message('normal');
    clear: both;
    display: flex;
    float: right;
    margin-top: em(-300px);
    min-width: 200px;
    opacity: 0;
    transition: margin 2s, opacity 2s;

    &__status {

        display: none;

        &:checked {

            + #{$self} {

                animation: autoHideMessage 3s forwards 10s;
                margin-top: em(10px);
                opacity: 1;

                @for $i from 1 through 10 {

                    &--#{$i} {

                        animation-delay: 8s + ($i * 2);

                    }

                }

            }

        }

    }

    &__close {

        align-self: center;
        cursor: pointer;
        display: inline-block;
        margin-left: auto;
        padding: em(0 5px 0 15px);

    }

    &__icon {

        align-self: center;
        display: inline-block;
        height: em(100%);
        margin-right: em(20px);

    }

    &--success {

        background: color('green');
        color: color('white');

        #{$self}__icon {

            border: 0 solid;
            border-bottom-width: em(2px);
            border-right-width: em(2px);
            transform: rotate(40deg);
            transform-origin: right center;
            width: em(75%);

        }

    }

    &--error {

        background: color('red');
        color: color('white');

        #{$self}__icon {

            position: relative;
            width: em(100%);

            &:before,
            &:after {

                border-left: em(2px) solid;
                content: '';
                display: block;
                height: 100%;
                left: 50%;
                margin-left: em(-1px);
                position: absolute;
                top: 0;
                transform: rotate(45deg);
                transform-origin: center center;

            }

            &:after {

                transform: rotate(-45deg);

            }

        }

    }

}

@keyframes autoHideMessage {

    0% {

        opacity: 1;

    }

    100% {

        margin-top: em(-300px);
        opacity: 0;

    }

}