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

@title_font: default;
@title_font_weight: 400;
@title_size: default;
@title_color: default;
@title_tag: h5;

@text_font: default;
@text_font_weight: 400;
@text_size: default;
@text_color: default;

@more_text_font: default;
@more_text_font_weight: 400;
@more_text_size: default;
@more_text_color: default;
@per_row: 3;

@container_size: 84px;
@icon_size: 24px;
@use_icon_size: false;

@responsive_breakpoint: 520px;

.sow-features-list {
    .clearfix();

    .sow-features-feature {
        position: relative;
        float: left;
        .box-sizing(border-box);
        padding: 0 25px;
        display: flex;

        @media (min-width: @responsive_breakpoint) {
            &:nth-of-type(@{per_row}n+1) {
                padding-left: 0;
                clear: left;
            }

            &:nth-of-type(@{per_row}n) {
                padding-right: 0;
            }
        }

        &.sow-icon-container-position-top {
            flex-direction: column;
            text-align: center;

            .sow-icon-container {
                margin-bottom: 10px;
            }
        }

        &.sow-icon-container-position-right {
            text-align: left;
            flex-direction: row;

            .sow-icon-container {
                margin-right: 10px;
            }
        }

        &.sow-icon-container-position-left {
            text-align: left;
            flex-direction: row-reverse;

            .sow-icon-container {
                margin-left: 10px;
            }
        }

        &.sow-icon-container-position-bottom {
            text-align: center;
            flex-direction: column-reverse;

            .sow-icon-container {
                margin-top: 10px;
            }
        }
        
        & when ( @per_row = 1 ) {
            &.sow-icon-container-position-top, &.sow-icon-container-position-bottom {
                .sow-icon-container {
                    margin: auto;
                }
            }
        }
        
        .sow-icon-container {
            width: @container_size;
            height: @container_size;
            font-size: @container_size;
            text-decoration: none;

            & when not ( @per_row = 1 ) {
                margin: auto;
            }

            [class^="sow-icon-"],
            .sow-icon-image {
				text-decoration: none;
				color: #FFFFFF;
				width: @container_size;
				height: @container_size;
				position: absolute;
				top: 0;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon_size() when ( @use_icon_size = true) {
                	background-size: @icon_size @icon_size;
				}
				.icon_size() when not ( @use_icon_size = true) {
                	background-size: contain;
				}
				.icon_size();
                background-repeat: no-repeat;
                background-position: center;
            }
        }

        @{title_tag} {
            margin: 1em 0;

            a{
                color: inherit;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        p.sow-more-text {
            a {
                font-weight: 500;
                color: inherit;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        p:last-child {
            margin-bottom: 0;
        }

        margin-bottom: 40px;

        &.sow-features-feature-last-row {
            margin-bottom: 0;
        }

        .textwidget {
            margin: auto;
            .font(@text_font, @text_font_weight);
            font-size: @text_size;
            color: @text_color;
            
            > @{title_tag} {
                .font(@title_font, @title_font_weight);
                font-size: @title_size;
                color: @title_color;
            }

            > p.sow-more-text {
                .font(@more_text_font, @more_text_font_weight);
                font-size: @more_text_size;
                color: @more_text_color;
            }
        }
    }

    .sow-features-clear {
        clear: both;
    }

    @media (max-width: @responsive_breakpoint) {
        &.sow-features-responsive {
            margin: 0;

            .sow-features-feature {
                width: 100% !important;
                float: none;
                margin-bottom: 40px;
                display: block;

                &:last-child {
                    margin-bottom: 0px;
                }
            }

            .sow-features-clear {
                clear: none;
            }

        }
    }
}
