/*
Newsletter
==========================================
Contains the styles of the newsletter sign-up page and the form element inside it.

It contains the viewport specific styles inside media queries.
*/

.newsletter--content {
    .unitize(padding-top, 10);
    .clearfix();

    .newsletter--error-messages {
        .unitize(margin-bottom, 10);
    }

    .newsletter--headline {
        .unitize(margin-bottom, 10);

        .newsletter--title {
            .unitize(margin-top, 10);
        }

        .newsletter--info {
            margin: 0;
        }
    }

    .select-field {
        .unitize(margin-bottom, 10);
        max-width: 100%;
    }

    .newsletter--required-info {
        .unitize(margin-bottom, 16);
    }

    .newsletter--action {
        .clearfix();
    }
}

    // Newsletter listing
.newsletter-listing--content {
    .unitize(margin-top, 10);

    .newsletter-listing--headline {
        .unitize(margin-bottom, 10);
    }
    .newsletter--title {
        .unitize-margin(10, 0);
    }

    .newsletter-listing--table-headline {

        .newsletter-listing--headline-name {
            width: 65%;
        }

        .newsletter-listing--headline-button {
            width: 35%;
        }
    }

    .newsletter-listing--entry {
        .unitize-padding(10, 0, 10, 0, 16);
        border-bottom: 1px solid @border-color;

        .newsletter-listing--entry-description {
            .unitize(margin-top, 4);
            width: 65%;
        }

        .newsletter-listing--entry-button {
            width: 35%;
        }

        &:last-child {
            border: none;
        }
    }
}

    // Newsletter detail
.newsletter-detail--content {
    .unitize(margin-top, 10);

    .newsletter-detail--container {
        .clearfix();

        .newsletter-detail--iframe {
            overflow: auto;
            -webkit-overflow-scrolling: touch;

            iframe {
                .unitize(min-height, 500);
                width: 100%;
                border: none;
                outline: none;
            }
        }
    }

    .newsletter-detail--buttons {
        .unitize-margin(10, 0, 10, 0);

        .newsletter-detail--backlink {
            width: 100%;
        }

        .newsletter-detail--window {
            .unitize(margin-bottom, 10);
            width: 100%;
        }
    }
}

@media screen and (min-width: @phoneLandscapeViewportWidth) {

    .newsletter-listing--content {
        .newsletter-listing--table-headline {
            .newsletter-listing--headline-name {
                width: 80%;
            }
            .newsletter-listing--headline-button {
                width: 20%;
            }
        }
        .newsletter-listing--entry {
            .newsletter-listing--entry-description {
                width: 80%;
            }
            .newsletter-listing--entry-button {
                width: 20%;
            }
        }
    }

    .newsletter-detail--content {
        .newsletter-detail--buttons {
            .newsletter-detail--backlink,
            .newsletter-detail--window {
                width: auto;
                margin: 0;
            }
        }
    }

}

@media screen and (min-width: @tabletViewportWidth) {

    .newsletter--content {
        .unitize(padding-top, 20);

        .newsletter--error-messages {
            .unitize(margin-bottom, 20);
        }

        .newsletter--headline {
            .unitize(margin-bottom, 20);
        }

        .select-field {
            .unitize(margin-bottom, 15);
            .unitize(max-width, 290);
        }
    }

    // Newsletter listing
    .newsletter-listing--content {
        .unitize(margin-top, 20);

        .newsletter-listing--headline {
            .unitize(margin-bottom, 20);
        }
    }

    // Newsletter detail
    .newsletter-detail--content {
        .unitize(margin-top, 20);

        .newsletter-detail--buttons .newsletter-detail--window {
            width: auto;
            text-align: right;
        }
    }
}

@media screen and (min-width: @desktopViewportWidth) {

    // Padding Newsletter Error Message Desktop
    .newsletter--error-messages {
        .unitize(padding-top, 0);
    }

    .newsletter--content {
        .unitize(margin-top, 45);
        padding: 0;

        .newsletter--headline .newsletter--title {
            .unitize(margin-top, 0);
        }

    }

    // Newsletter listing
    .newsletter-listing--content {
        .unitize(margin-top, 45);

        .newsletter-listing--table-headline {
            .newsletter-listing--headline-name {
                width: 90%;
            }
            .newsletter-listing--headline-button {
                width: 10%;
            }
        }
        .newsletter-listing--entry {
            .newsletter-listing--entry-description {
                width: 90%;
            }
            .newsletter-listing--entry-button {
                width: 10%;
            }
        }
    }

    // Newsletter detail
    .newsletter-detail--content {
        .unitize(margin-top, 45);
    }
}