@import "@cnbritain/merlin-www-common:wired";
@import "@cnbritain/merlin-www-buttons:wired";

@import "../wireframe/wireframe";

.c-newsletter {
    background-color: $white;
    box-sizing: border-box;
    margin: $MOBILE_SLICE_MARGIN auto;
    text-align: center;

    @include at-medium-size {
        margin-bottom: $TABLET_SLICE_MARGIN;
        margin-top: $TABLET_SLICE_MARGIN;
        padding: 0 $TABLET_SIDE_GUTTER;
    }

    @include at-x-large-size {
        margin-bottom: $DESKTOP_SLICE_MARGIN;
        margin-top: $DESKTOP_SLICE_MARGIN;
        padding: 0 $DESKTOP_SIDE_GUTTER;
    }
}

.c-newsletter-wrapper {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: $MAXIMUM_PAGE_WIDTH;
    padding: 30px $MOBILE_SIDE_GUTTER;
    position: relative;

    @include at-medium-size {
        padding: 30px $TABLET_SIDE_GUTTER;
    }

    @include at-x-large-size {
        padding: 40px $DESKTOP_SIDE_GUTTER;
    }
}

.c-newsletter__logo {
    margin-bottom: 15px;

    svg {
        width: 70px;
        height: 70px;
    }

    @include at-medium-size {
        margin-bottom: 20px;
    }

}

.c-newsletter__title {
    @include font('NEW GROTESK SQUARE', 30px, 700, 30px);
    margin: 0 0 10px 0;
    text-transform: uppercase;

    @include at-medium-size {
        @include font-size(40px);
        @include line-height(40px);
        margin-bottom: 17px;
    }
}

.c-newsletter__description {
    @include font('EXCHANGE WEB', 17px, null, 23px);
    margin: 0 auto 20px auto;
    max-width: 750px;

    @include at-medium-size {
        margin-bottom: 25px;
    }
}

.c-newsletter__form {
    margin: 0 auto 10px auto;
    max-width: 500px;
    width: 100%;

    @include at-medium-size {
        height: 40px;
    }
}

.c-newsletter__form-text {
    @include font('BRUTAL', 14px, 400, 17px);
    background-color: $white-smoke;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    color: $black;
    display: block;
    height: 40px;
    letter-spacing: 0.020em;
    margin-bottom: 10px;
    padding: 10px;
    width: 100%;

    @include at-medium-size {
        float: left;
        margin-bottom: 0;
        width: calc(100% - (140px + 10px));
    }

}
.c-newsletter__form-btn {
    @include button-single();
    @include button-single-light();

    &:focus,
    &:hover {
        @include button-single-light-hover();
    }

    @include at-medium-size {
        float: left;
        margin-left: 10px;
        width: 140px;
    }
}

.c-newsletter__legal {
    @include font('BRUTAL', 10px, 400, 15px);
    margin: 0;

    a {
        border: none;
    }

    @include at-medium-size {
        @include font-size(12px);
    }
}

.c-newsletter__privacy {
    color: $black;
    text-decoration: underline;
}