.c-notification {
    width: 100%;
    max-width: 400px;
    max-height: 400px;
    padding: 20px;
    border-radius: 4px;
    overflow: auto;
    background-color: #fff;
    box-shadow: 0 2px 15px 0 rgba(0,0,0,.15);

    scrollbar();

    &__header {
        position: relative;
        margin-bottom: $vertical--element-lg;
        padding-top: 60px;

        @media (min-width: $screen--md) {
            flexbox();
            align-items: center;
            padding: 0;
        }
    }

    &__close {
        position: absolute;
        top: 0;
        right: 0;

        @media (min-width: $screen--md) {
            position: inherit;
            order: 1;
            margin-left: 10px;
        }
    }

    &__title {
        margin: 0;
        font-size: 1.75em;
        line-height: 1;

        @media (min-width: $screen--md) {
            flex: 1 0 auto;
            text-ellipsis();
        }
    }

    &__action {
        margin-top: $vertical--element-lg;

        .c-btn {
            min-width: 140px;

            @media (min-width: $screen--md) {
                & + .c-btn {
                    margin-left: 10px;
                }
            }
        }
    }
}