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

@import "../wireframe/wireframe";

.c-show-summary-section {
    background-color: $seashell;
    padding-bottom: $MOBILE_SLICE_MARGIN;
    position: relative;
    max-width: none;

    @include min-screen($TABLET_SIDE_GUTTER_BREAKPOINT) {
        padding-bottom: $TABLET_SLICE_MARGIN;
    }

    @include min-screen($DESKTOP_SIDE_GUTTER_BREAKPOINT) {
        padding-bottom: $DESKTOP_SLICE_MARGIN;
    }
}

.c-show-summary-section__wrapper {
    margin: 0 auto;
    max-width: $MAXIMUM_PAGE_WIDTH;
    position: relative;
}

.c-show-summary-section__link {
    bottom: 0;
    font-size: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.c-show-summary-section__content {
    background: $white;
    border-bottom: 1px solid $bon-jour;
    margin: 0 20px;
    padding: 28px 20px;
    position: relative;
    text-align: center;

    &:after {
        @include triangle(16px, 12px, 'up', $white);
        content: '';
        height: 0;
        left: 50%;
        position: absolute;
        top: -16px;
        transform: translateX(-50%);
        width: 0;
    }

    @include min-screen($FEATURE_LARGE_BREAKPOINT) {
        margin: 0 60px;
        padding: 56px 48px;
        &:after {
            @include triangle(18px, 14px, 'up', $white);
            top: -18px;
        }
    }
}

.c-show-summary-section__tag {
    @include font("GOTHAM", 11px, 700, 14px, -4);
    color: $limed-oak;
    margin-bottom: 8px;
    margin-top: 0;
    text-transform: capitalize;
    @include min-screen($FEATURE_LARGE_BREAKPOINT) {
        @include font-size(12px);
        @include line-height(16px);
        margin-bottom: 12px;
    }
}

.c-show-summary-section__title {
    color: $woodsmoke;
    @include font("ITC_FENICE", 24px, 700, 28px, -4);
    margin-bottom: 14px;
    margin-top: 0px;
    @include min-screen($FEATURE_LARGE_BREAKPOINT) {
        @include font-size(32px);
        @include line-height(36px);
        margin-bottom: 8px;
        margin-top: 0px;
    }
}

.c-show-summary-section__meta {
    @include font("GOTHAM", 9px, 500, 14px);
    color: $oslo-gray;
    margin-top: 6px;
}

li.c-show-summary-section__meta-item {
    padding-right: 0;
    & + li.c-show-summary-section__meta-item {
        border-left: none;
        padding-left: 0;
        &:before {
            background-color: $oslo-gray;
            border-radius: 50%;
            content: "";
            display: inline-block;
            height: 2px;
            margin: 1px 4px;
            width: 2px;
        }
    }
}