@import 'variables';
@import 'mixins';
#notifications-page {
    min-height: 380px;
    .header {
        background-color:$color-2;
        padding:35px 0 20px 0;
        margin-bottom:35px;

        h1 {
            @include font-size(30, 30);
            letter-spacing:-0.56px;
            font-weight:$bold;
            margin-bottom:5px;
            color:#fff;
        }
        .h1-subtitle {
            max-width:70%;
            @include font-size(15, 21);
            color:#fff;
            font-weight:$fw-regular;
        }
    }
    .header-bar {
        overflow:hidden;
        margin-bottom:20px;
        .mark-all-button {
            float:right;
            display:block;
            background:#fff;
            border:1px solid $color-2;
            color:$color-2;
        }
        h2 {
            padding-top:8px;
            @include font-size(18, 18);
            font-weight:$regular;
        }
    }
    .notification {
        border:1px solid #ccc;
        border-radius:2px;
        margin-bottom:15px;
        position:relative;
        transition:opacity 0.2s;
        max-width:600px;
        &.read {
            opacity:0.4;
            .mark-as-read-button {
                display:none;
            }
        }

        .image {
            display:block;
            position:absolute;
            top:0;
            left:0;
            bottom:40px;
            width:60px;
            text-decoration:none;
            color:#333;
            text-align:center;
            background-repeat:no-repeat;
            background-size:50px;
            background-position:center center;
            border-right:1px solid #ccc;
            @include width-small() {
                bottom:0;
            }
        }
        .info {
            display:block;
            text-decoration:none;
            color:#333;
            margin-left:60px;
            padding:12px 15px;
            @include width-small() {
                margin-right:60px;
            }

            .content {
                @include font-size(14, 19);
                margin-bottom:5px;
                strong {
                    font-weight:$regular;
                }
            }
            .when {
                @include font-size(11, 11);
                font-weight:$regular;
                color:#aaa;
            }
        }
        .mark-as-read-button {
            display:block;
            height:40px;
            background-color:$color-2;
            background-image:image-url('tick-white.png');
            background-repeat:no-repeat;
            background-size:15px;
            background-position:center center;
            border-radius:0 0 1px 1px;
            border:1px solid $color-2;
            @include width-small() {
                position:absolute;
                top:-1px;
                bottom:-1px;
                right:-1px;
                width:60px;
                border-radius:0 2px 2px 0;
                height:auto;
            }
        }
    }
    .no-notifications {
        color:#999;
        @include font-size(16, 16);
        margin-bottom:20px;
    }

    .pure-button {
        background:$color-2;
        color:#fff;
        padding:10px 20px;
    }
}
