<div class="m-flash-messages">
	<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">
		<span class="a-flash-message__icon"></span> Content of success notice <label for="flash-message-status-1" class="a-flash-message__close" aria-label="Close">&#10005;</label>
	</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">
		<span class="a-flash-message__icon"></span> Content of error notice <label for="flash-message-status-2" class="a-flash-message__close" aria-label="Close">&#10005;</label>
	</div>
</div>

@import "atoms/flash-message/index";

.m-flash-messages {

    overflow: hidden;
    padding: em(10px);
    padding-top: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 999;

    @media(min-width: breakpoint-min(sm)) {

        max-width: em(400px);
        width: 50%;

    }

}