@import '../../../styles/mixins';
@import '../../../styles/shared/product-description';

.productDescription {
    @include product-description;
    
    &_startingFrom {
        @include title-3;
        margin-bottom: 4px;
    }
    &_pricingWrapper {
        margin-top: 34px;

        @include media-md-up {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
        }
    }
    &_pricing + &_priceButton {
        @include media-md-down {
            margin-top: $grid-gutter-height;
        }
    }
    &_pricing {
        @include media-md-up {
            margin-right: 48px;
        }
    }
    &_priceValue {
        @include text-xLarge;
        line-height: 1;
        font-weight: bold;
    }
    &_priceFrequency {
        @include text-5;
        @include text-lower;
        margin-left: 8px;
    }
    &_priceButton {
        @include media-md-up {
            padding-bottom: 5px;
        }
    }
    &_availableAddons {
        margin: 44px 0 0;
        
        @include media-md-up {
            margin-top: 23px;
        }
    }
    &_addonPriceWrapper {
        display: flex;
        flex-flow: row wrap;
        align-items: baseline;
        justify-content: center;

        & + & {
            margin-top: 5px;
        }
    }
    &_addonItem {
        @include background-midGray;
        @include border-radius(3px);
        padding: 14px;
        text-align: center;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    &_addonName {
        flex-grow: 1;
    }
    &_addonPriceItem {
        margin-top: 7px;
    }
    &_addonFormattedPrice {
        @include text-1;
    }
    &_addonPriceFrequency {
        @include text-6;
        @include text-lower;
        margin-left: 8px;
    }
    &_addonsWrapper {
        @include border-gray;
        @include background-white;
        display: flex;
        flex-flow: column;
        height: 100%;
        border-radius: 8px;
        padding: 30px 28px;
    }
    &_addonPrice {
        @include title-1;
        margin-bottom: 0;
    }
    &_addonPriceDetails {
        margin-left: 6px;
        line-height: 0;
    }
    &_unit,
    &_frequency {
        @include text-6;
        @include text-lower;
    }
    &_unit {
        &:after {
            content: ' ';
        }
    }
    &_title {
        &--medium {
            @include default($headingFontSizeXLarge, $genericLineHeight, $header-fontFace);
        }
        &--large {
            @include default($headingFontSizeXXLarge, $genericLineHeight, $header-fontFace);
        }
    }

    &_description {
        &--medium {
            @include default($bodyFontSize4, $genericLineHeight, $body-fontFace);
        }
        &--large {
            @include default($bodyFontSize3, $genericLineHeight, $body-fontFace);
        }
    }
}
