@import "../../shared/common";
@import (reference) "standard";

@template-grid-gap: 2%; // The final gap between 2 items with be this value *2
@template-grid-col-deduct: (@template-grid-gap * 2); // We have to multiple it with 2, because the gap will be on the left and right of an item

//== Grid
.affcoups-coupons-grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: start;
    margin: 0 -@template-grid-gap;
}

.affcoups-coupons-grid__item {
    width: 100%;
    margin: 0 @template-grid-gap;

    // Handling equal heights of items.
    @media (min-width: (@breakpoint-mobile + 1px)) {
        display: flex;

        > * {
            max-width: 100%;
        }
    }

    .affcoups-coupon__description {
        margin: 8px 0 0;

        font-size: 15px;

        & > *:first-child {
            margin-top: 0;
        }

        & > *:last-child {
            margin-bottom: 0;
        }
    }

    .affcoups-coupon__description-excerpt {
        display: block;
    }

    .affcoups-coupon__description-full {
        display: none;
    }

    .affcoups-coupon__description--full {

        .affcoups-coupon__description-excerpt {
            display: none;
        }

        .affcoups-coupon__description-full {
            display: block;
        }
    }
}

@media (min-width: (@breakpoint-mobile + 1px)) {
    .affcoups-coupons-grid--col-2 {

        .affcoups-coupons-grid__item {
            width: ((100% / 2) - @template-grid-col-deduct);
        }
    }

    .affcoups-coupons-grid--col-3 {

        .affcoups-coupons-grid__item {
            width: ((100% / 3) - @template-grid-col-deduct);
        }
    }

    .affcoups-coupons-grid--col-4 {

        .affcoups-coupons-grid__item {
            width: ((100% / 4) - @template-grid-col-deduct);
        }
    }

    .affcoups-coupons-grid--col-5 {

        .affcoups-coupons-grid__item {
            width: ((100% / 5) - @template-grid-col-deduct);
        }
    }

    .affcoups-coupons-grid--col-6 {

        .affcoups-coupons-grid__item {
            width: ((100% / 6) - @template-grid-col-deduct);
        }
    }

    .affcoups-coupons-grid--col-7 {

        .affcoups-coupons-grid__item {
            width: ((100% / 7) - @template-grid-col-deduct);
        }
    }

    .affcoups-coupons-grid--col-8 {

        .affcoups-coupons-grid__item {
            width: ((100% / 8) - @template-grid-col-deduct);
        }
    }

    .affcoups-coupons-grid--col-9 {

        .affcoups-coupons-grid__item {
            width: ((100% / 9) - @template-grid-col-deduct);
        }
    }

    .affcoups-coupons-grid--col-10 {

        .affcoups-coupons-grid__item {
            width: ((100% / 10) - @template-grid-col-deduct);
        }
    }
}

@media (min-width: (@breakpoint-default + 1px)) and (max-width: @breakpoint-large) {
    .affcoups-coupons-grid--col-7,
    .affcoups-coupons-grid--col-9{

        .affcoups-coupons-grid__item {
            width: ((100% / 3) - @template-grid-col-deduct);
        }
    }
}

@media (min-width: (@breakpoint-default + 1px)) and (max-width: @breakpoint-large) {
    .affcoups-coupons-grid--col-8 {

        .affcoups-coupons-grid__item {
            width: ((100% / 4) - @template-grid-col-deduct);
        }
    }
}

@media (min-width: (@breakpoint-default + 1px)) and (max-width: @breakpoint-large) {
    .affcoups-coupons-grid--col-10 {

        .affcoups-coupons-grid__item {
            width: ((100% / 5) - @template-grid-col-deduct);
        }
    }
}

@media (min-width: (@breakpoint-mobile + 1px)) and (max-width: @breakpoint-default) {
    .affcoups-coupons-grid--col-3,
    .affcoups-coupons-grid--col-4,
    .affcoups-coupons-grid--col-5,
    .affcoups-coupons-grid--col-6,
    .affcoups-coupons-grid--col-7,
    .affcoups-coupons-grid--col-8,
    .affcoups-coupons-grid--col-9,
    .affcoups-coupons-grid--col-10 {

        .affcoups-coupons-grid__item {
            width: ((100% / 2) - @template-grid-col-deduct);
        }
    }
}

//== Grid Styles
.affcoups-coupons-grid {
    .template-standard-layout();
}