// Styling
.g-pricingtable-particle {
    h2.g-title {
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

.g-pricingtable-headertext {
    margin-bottom: ($content-margin + $content-padding) * 2;
    padding: 0 25%;
    color: fadeout($white, 25%);
    @include responsive-font($responsive-font-size + 0.6, $core-font-size + 0.3, false, false);

    @include breakpoint(large-desktop-range) {
        margin-bottom: ($content-margin + $content-padding) * 3.5;
    }

    @include breakpoint(mobile-only) {
        padding: 0 5%;
    }
}

.g-pricingtable-footertext {
    margin-top: ($content-margin + $content-padding) * 2;
    padding: 0 20%;
    color: fadeout($white, 50%);
    font-size: $core-font-size + 0.25;

    @include breakpoint(large-desktop-range) {
        margin-top: ($content-margin + $content-padding) * 3.5;
    }

    @include breakpoint(mobile-only) {
        padding: 0 5%;
    }
}

.g-pricingtable-container {
    @include display(flex);
    @include flex-flow(row);
    @include flex-wrap(wrap);
}

.g-pricingtable-col-item {
    @include display(flex);
    padding: $content-margin;
    z-index: 1;

    .g-pricingtable-1-col & {
        @include flex(auto 1 100%);
        width: 100%;
    }

    .g-pricingtable-2-col & {
        @include flex(auto 1 50%);
        width: 50%;
    }

    .g-pricingtable-3-col & {
        @include flex(auto 1 33.33333%);
        width: 33.33333%;
    }

    .g-pricingtable-4-col & {
        @include flex(auto 1 25%);
        width: 25%;

        @include breakpoint(desktop-range) {
            @include flex(auto 1 50%);
            width: 50%;
        }

        @include breakpoint(tablet-range) {
            @include flex(auto 1 50%);
            width: 50%;
        }
    }

    .g-pricingtable-5-col & {
        @include flex(auto 1 20%);
        width: 20%;
    }

    .g-pricingtable-6-col & {
        @include flex(auto 1 16.66667%);
        width: 16.66667%;
    }

    @include breakpoint(mobile-only) {
        @include flex(auto 1 100% !important);
        width: 100% !important;
    }

    .g-pricingtable {
        width: 100%;
        margin: 0;
        position: relative;
        overflow: hidden;
        list-style: none;
        padding: $content-padding;
        color: $black;
        background: $white;
        border: 1px solid fadeout($black, 85%);
        border-radius: 10px;
        text-align: center;
        box-shadow: 0 15px 50px fadeout(desaturate($accent-color-1, 40%), 75%);

        .button {
            @extend %g-button;
            margin: $content-padding 0;
            @include responsive-font($responsive-font-size - 0.3, $core-font-size, false, false);
        }

        .g-pricingtable-ribbon {
            z-index: 2;
            position: absolute;
            line-height: $core-line-height + 0.85;
            font-size: $core-font-size - 0.35;
            font-weight: $font-weight-medium;
            background: lighten($accent-color-2, 30%);
            width: 135px;
            top: 20px;
            left: -33px;
            text-align: center;
            letter-spacing: 1px;
            @include transform(rotate(-45deg));

            @if (lightness(lighten($accent-color-2, 30%)) > 60) {
                color: $accent-color-2;
            } @else {
                color: #ffffff;
            }

            .dir-rtl & {
                right: -33px;
                left: auto;
                @include transform(rotate(45deg));
            }
        }

        .g-pricingtable-icon {
            font-size: $core-font-size + 1.5;
        }

        .g-pricingtable-plan {
            padding: $content-padding 0 0;
            @include responsive-font($responsive-font-size + 0.15, $core-font-size + 0.1, false, false);
            font-weight: $font-weight-regular;
            color: $black;

            a {
                color: $black;

                &:hover {
                    color: $accent-color-1;
                }
            }
        }

        .g-pricingtable-subtitle {
            padding-top: 0;
            margin-top: -1rem;
            font-size: $core-font-size - 0.1;
        }

        .g-pricingtable-price {
            padding: 0 0 $content-padding;
            font-weight: $font-weight-bold;
            @include responsive-font($responsive-font-size + 0.5, $core-font-size + 0.5, false, false);
        }

        .g-pricingtable-period {
            font-size: $core-font-size;
            font-weight: $font-weight-light;
            line-height: $core-line-height - 1;
        }

        .g-pricingtable-desc {
            font-size: $core-font-size;
            padding: $content-padding 0;
        }

        .g-pricingtable-item {
            @include responsive-font($responsive-font-size - 0.35, $core-font-size, false, false);
            font-weight: $font-weight-regular;
            padding-bottom: $content-margin;
            color: fadeout($black, 65%);

            &.g-pricingtable-item-0 {
                position: relative;
                padding-top: $content-padding;
            }

            &.disabled {
                text-decoration: line-through;
            }
        }
    }

    // Highlighted Table
    &.g-pricingtable-col-item-highlight {
        z-index: 5;

        @include breakpoint(no-mobile) {
            @include transform(scale(1.2));
        }
    }
}