@import '../../../styles/fills';
@import '../../../constants/modifiers';
@import '../../../styles/definitions/breakpoints';
@import '../../../styles/grid';
@import '../../../styles/mixins';

// Local Variables
$namespace: ".featureDetails";
$feature-wrapper-selector: "#{$namespace}_wrapper";
$feature-wrapper-two-column-selector: "#{$feature-wrapper-selector}--two-column";
$feature-wrapper-image-left-selector: "#{$feature-wrapper-selector}--image-left";
$feature-wrapper-align-center-selector: "#{$feature-wrapper-selector}--align-center";
$feature-wrapper-align-right-selector: "#{$feature-wrapper-selector}--align-right";
$feature-wrapper-image-alternating-selector: "#{$feature-wrapper-selector}--image-alternating";
$feature-container-selector: "#{$namespace}_container";
$feature-selector: "#{$namespace}_feature";
$feature-title-selector: "#{$namespace}_title";
$feature-characteristic-selector: "#{$namespace}_characteristic";
$icon_width: 16px;
$icon_spacing: 11px;

// Local Mixin
@mixin column_2 {
    @include media-lg-up {
        flex-basis: 50%;
        max-width: 50%;
    }
}

// Component Styles
#{$namespace} {
    &_container {
        display: flex;
        justify-content: center;
        position: relative;
        padding: 20px 0;
        background-color: transparent;

        & + & {
            margin-top: $grid-gutter-width * 2;
        }

        &:nth-child(even) {
            &:before {
                @include full-window-width;
                content: "";
                background-color: var(--background-color, transparent);
            }
        }

        @include media-lg-up {
            padding-top: 40px;
            padding-bottom: 40px;
        }
    }

    &_content {
        width: 100%
    }

    &_highlight {
        &_wrapper {
            position: relative;
            display: block;

            &--with-icon {
                padding-left: $icon_width + $icon_spacing;
            }
        }
    }

    &_icon {
        &_wrapper {
            position: relative;
            display: block;

            &--with-icon {
                padding-left: $icon_width + $icon_spacing;
            }
        }
        position: absolute;
        top: 3px;
        left: 0;
        width: $icon_width;

        &--check {
            circle {
                fill: $success-color;
            }
            path {
                fill: $white;
            }
        }
    }

    &_row {
        position: relative;
        margin-right: $grid-gutter-width * -1;
        margin-left: $grid-gutter-width * -1;
        
        #{$feature-wrapper-two-column-selector} & {
            @include media-lg-up {
                display: flex;
                justify-content: center;
            }
        }
    }

    &_feature {
        padding: 0 $grid-gutter-width;
        text-align: var(--text-align, left);

        &--with-image {
            #{$feature-wrapper-two-column-selector} & {
                @include column_2;
            }
        }

        &:not(&--with-image) {
            margin-right: auto;
            margin-left: auto;
            max-width: 900px;
        }
    }

    &_imageContainer {
        display: flex;
        align-items: flex-start;
        padding: 0 $grid-gutter-width;
        margin-top: $grid-gutter-width * 2;

        #{$feature-wrapper-image-alternating-selector} #{$feature-container-selector}:nth-child(even) &,
        #{$feature-wrapper-image-left-selector} & {
            order: -1;
        }

        #{$feature-wrapper-two-column-selector} & {
            @include column_2;
                
            @include media-lg-up {
                margin-top: 0;
            }
        }
        
        #{$feature-wrapper-align-center-selector} & {
            justify-content: center;
        }
        
        #{$feature-wrapper-align-right-selector} & {
            justify-content: flex-end;
        }
    }

    &_title {
        @include title-xLarge;
        line-height: 44px;
        margin: 0;

        #{$feature-characteristic-selector} & {
            @include title-3;
            line-height: 23px;
            margin: 0;
        }
    }

    &_description {
        @include text-4;
        line-height: 25px;
        margin: 0;
    }

    &_highlight {
        &_wrapper {
            #{$feature-characteristic-selector} & {
                @include text-5;
                line-height: 23px;
            }

            #{$feature-title-selector} + & {
                margin-top: 20px;
            }

            #{$feature-characteristic-selector} #{$feature-title-selector} + & {
                margin-top: 10px;
            }
        }
    }

    &_characteristic {
        margin: 30px 0 0;

        &Item + &Item {
            margin-top: 20px;
        }
    }
}
