//
//  Notification Section
//  ____________________________________________

//
//  Variables
//  --------------------------------------------

@amxnotif-block-label__color: #2F2F2F;

//
//  Common
//  ----------------------------------------------

& when (@media-common = true) {
    .amxnotif-block {
        & {
            margin-bottom: 20px;
            clear: both;
        }

        .input-fields {
            display: inline-block;
            width: 66%;
            vertical-align: top;
            margin: 0;
        }

        .amxnotif_guest_action {
            vertical-align: top;
            display: inline-block;
            max-width: 32%;
            min-width: 120px;
        }

        label {
            .lib-css(color, @amxnotif-block-label__color);
            font-weight: bold;
            float: none;
            display: block;
        }

        .amsubscribe, .amsubscribe:hover {
            height: 32px;
            padding: 0 20px;
            background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDUxMCA1MTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMCA1MTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iY2hlY2stY2lyY2xlLW91dGxpbmUiPgoJCTxwYXRoIGQ9Ik0xNTAuNDUsMjA2LjU1bC0zNS43LDM1LjdMMjI5LjUsMzU3bDI1NS0yNTVsLTM1LjctMzUuN0wyMjkuNSwyODUuNkwxNTAuNDUsMjA2LjU1eiBNNDU5LDI1NWMwLDExMi4yLTkxLjgsMjA0LTIwNCwyMDQgICAgUzUxLDM2Ny4yLDUxLDI1NVMxNDIuOCw1MSwyNTUsNTFjMjAuNCwwLDM4LjI1LDIuNTUsNTYuMSw3LjY1bDQwLjgwMS00MC44QzMyMS4zLDcuNjUsMjg4LjE1LDAsMjU1LDBDMTE0Ljc1LDAsMCwxMTQuNzUsMCwyNTUgICAgczExNC43NSwyNTUsMjU1LDI1NXMyNTUtMTE0Ljc1LDI1NS0yNTVINDU5eiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
            background-repeat: no-repeat;
            background-position: center;
        }

        div.field {
            margin: 5px 0;
        }
    }

    .products.list {
        .amxnotif-block {
            .amxnotif_guest_action {
                min-width: initial;
            }
        }

        .amxnotif-block.label:not(.subscribe-popup) {
            margin-bottom: inherit;
        }

        .stock.link-stock-alert {
            margin-bottom: 20px;
            display: none;
        }
    }

    .category.subscribe-popup {
        position: fixed;
        z-index: 99999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
    }

    .amxnotif-block .subscribe-popup {
        background-color: #fefefe;
        position: relative;
        padding: 20px 20px 20px 20px;
        border: 1px solid #888;
        height: auto;
        box-sizing: border-box;
    }

    .category.amxnotif-block {
        display: none;
    }

    .label.subscribe-popup a {
        cursor: pointer;
    }

    .close-subscribe-popup {
        position: absolute;
        right: 20px;
        top: 20px;
        display: inline-block;
        color: #aaa;
        float: right;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
    }

    .amxnotif-block .subscribe-popup label[for^="notification-container"] {
        font-size: 20px;
        text-align: center;
    }
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .category .subscribe-popup {
        width: 100%;
        top: 35%;
        text-align: center;
    }

    .category .subscribe-popup .input-fields {
        margin-top: 20px;
        width: 100%;
    }

    .category .subscribe-popup .notification-container {
        width: 80%;
        margin: auto;
    }

    .category .subscribe-popup .amxnotif_guest_action {
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
    }

    .actions-toolbar.amxnotif_guest_action {
        margin-left: 5px;
    }

    .notification-container {
        display: -ms-inline-flexbox;
        display: -webkit-inline-flex;
        display: inline-flex;
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .amxnotif-block .input-fields {
        margin-bottom: 5px;
    }

    .category .subscribe-popup .amxnotif_guest_action {
        min-width: inherit;
    }

    .category .subscribe-popup {
        width: 40%;
        top: 25%;
        margin: 0 auto;
    }

    .category .subscribe-popup .notification-container {
        margin-top: 20px;
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .amxnotif-block .input-fields {
        margin-bottom: 0;
    }

    .category .subscribe-popup .notification-container {
        margin-top: 20px;
    }

    .category .subscribe-popup {
        width: 30%;
    }
}