@import "../../../base/less/mixins";

@responsive_breakpoint: 780px;

@headline_tag: h1;
@headline_font: default;
@headline_font_weight: 400;
@headline_font_size: default;
@headline_font_style: default;
@headline_line_height: 1.4em;
@headline_margin: default;
@headline_align: center;
@headline_mobile_align: center;
@headline_color: default;
@headline_hover_color: default;

@sub_headline_tag: h3;
@sub_headline_font: default;
@sub_headline_font_weight: 400;
@sub_headline_font_size: default;
@sub_headline_font_style: default;
@sub_headline_line_height: 1.4em;
@sub_headline_margin: default;
@sub_headline_align: center;
@sub_headline_mobile_align: center;
@sub_headline_color: default;
@sub_headline_hover_color: default;

@divider_style: solid;
@divider_width: 80%;
@divider_thickness: 1px;
@divider_color: #EEEEEE;
@divider_margin: 20px;
@divider_align: center;
@divider_mobile_align: center;

.sow-headline-container {

    @{headline_tag}.sow-headline {
        .font(@headline_font, @headline_font_weight);
        font-style: @headline_font_style;
        text-align: @headline_align;
        color: @headline_color;
        line-height: @headline_line_height;
        font-size: @headline_font_size;

        margin-top: @headline_margin;
        margin-bottom: @headline_margin;

        @media (max-width: @responsive_breakpoint) {
            text-align: @headline_mobile_align;
        }

        & a {
            color: @headline_color;
            &:hover {
                color: @headline_hover_color;
            }
        }
    }

    @{sub_headline_tag}.sow-sub-headline {
        .font(@sub_headline_font, @sub_headline_font_weight);
        font-style: @sub_headline_font_style;
        text-align: @sub_headline_align;
        color: @sub_headline_color;
        line-height: @sub_headline_line_height;
        font-size: @sub_headline_font_size;

        margin-top: @sub_headline_margin;
        margin-bottom: @sub_headline_margin;

        @media (max-width: @responsive_breakpoint) {
            text-align: @sub_headline_mobile_align;
        }

        & a {
            color: @sub_headline_color;
            &:hover {
                color: @sub_headline_hover_color;
            }
        }
    }

    .decoration {
        line-height: 0em;
        text-align: @divider_align;

        margin-top: @divider_margin;
        margin-bottom: @divider_margin;

        @media (max-width: @responsive_breakpoint) {
            text-align: @divider_mobile_align;
        }

        .decoration-inside {
            height: 1px;
            display: inline-block;
            border-top: @divider_thickness @divider_style @divider_color;
            width: 100%;
            max-width: @divider_width;
        }
    }

    *:first-child {
        margin-top: 0 !important;
    }

    *:last-child {
        margin-bottom: 0 !important;
    }
}