//== Dependencies
@import (optional) "../../node_modules/gee.less/gee";
@import (optional) "../../../../node_modules/gee.less/gee";

//== Variables

//== Generates
.hdeng-listing-critical-generate() {
    // Silence
}

.hdeng-listing-generate() {
    .listing__item {
        position: relative;
        .hdeng-box();

        &:hover {
            .listing__thumb {
                opacity: 1;
            }
        }
    }

    .listing__container--thumb {
        .gee-grid(@hdeng-gutter);

        .listing__thumb {
            .gee-unit(3, 12, @hdeng-gutter);
            margin-bottom: 0;
            opacity: .85;
            transition: opacity 0.5s ease-in-out;

            figure {
                margin: auto;
            }

            @media (max-width: @hdeng-breakpoint-mobile) {
                .gee-unit-width(12, 12, @hdeng-gutter);
                margin-bottom: @hdeng-spacing;
            }
        }

        .listing__preview {
            display: block;
        }

        .listing__img {
            .hdeng-img-responsive();
            margin: floor(@hdeng-spacing / 4) auto 0;
        }

        .listing__content {
            .gee-unit(9, 12, @hdeng-gutter);

            @media (max-width: @hdeng-breakpoint-mobile) {
                .gee-unit-width(12, 12, @hdeng-gutter);
            }
        }
    }

    @hdeng-listing-thumb-right-breakpoint: 625px;

    .listing__container--thumb-right {

        .listing__thumb {
            position: absolute;
            width: 200px;
            top: floor(@hdeng-spacing / 2);
            bottom: floor(@hdeng-spacing / 2);
            right: floor(@hdeng-spacing / 2);
            background: transparent 50% 0 no-repeat;
            background-size: cover;
            border-radius: @hdeng-border-radius;
            box-shadow: inset 0 0 @hdeng-spacing rgba(0, 0, 0, .25);
            transition: opacity 0.5s ease-in-out;

            opacity: .85;

            span {
                .hdeng-visuallyhidden();
            }

            @media (max-width: @hdeng-listing-thumb-right-breakpoint) {
                display: none;
            }
        }

        .listing__content {
            padding-right: 200px + @hdeng-spacing;
            min-height: 100px;

            @media (max-width: @hdeng-listing-thumb-right-breakpoint) {
                padding-right: 0;
                min-height: 0;
            }
        }
    }

    .listing__title {
        .hdeng-h3();
        margin-bottom: (@hdeng-spacing / 2);
        color: @hdeng-color-white;

        small {
            margin-left: floor(@hdeng-spacing / 2);
            color: @hdeng-boxes-color-reduced;

            &:before {
                content: '•';
                margin-right: floor(@hdeng-spacing / 4);
            }
        }
    }

    .listing__subtitle {
        .hdeng-h4();
        margin: -floor(@hdeng-spacing / 4) 0 floor(@hdeng-spacing / 2);
        color: @hdeng-color-silver;
    }

    .listing__description {
        margin: 0 0 @hdeng-spacing;

        font-size: 14px;
    }

    .listing__content,
    .listing__description {

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

    .listing__meta {
        margin: 0 0 @hdeng-spacing/2;

        font-size: 12px;
        color: @hdeng-boxes-color-reduced;
    }

    .listing__meta--pull {
        margin-top: -@hdeng-spacing/3;
    }

    ul.listing__meta {
        padding: 0;
        list-style: none;

        span {
            margin-left: floor(@hdeng-spacing / 4);

            &:before {
                content: '•';
                margin-right: floor(@hdeng-spacing / 4);
            }

            &:first-child {
                margin-left: 0;

                &:before {
                    content: "";
                    margin-right: 0;
                }
            }
        }

        @media (max-width: 1000px) {
            display: block;
            margin-bottom: floor(@hdeng-spacing / 2);
        }
    }

    .listing__meta-item {
        display: inline-block;
        margin-left: floor(@hdeng-spacing / 4);

        &:before {
            content: '•';
            margin-right: floor(@hdeng-spacing / 4);
        }

        &:first-child {
            margin-left: 0;

            &:before {
                content: "";
                margin-right: 0;
            }
        }
    }

    .listing__meta-separator {
        margin-left: floor(@hdeng-spacing / 4);

        &:before {
            content: '•';
            margin-right: floor(@hdeng-spacing / 4);
        }
    }

    .listing__meta-date,
    .listing__meta-item--date {
        color: darken(@hdeng-boxes-color-reduced, 15%);
        font-size: 11px;
    }

    .listing__actions-list {
        .hdeng-clearfix();
        padding: 0;
        margin: 0;

        font-size: 14px;
        list-style: none;
    }

    .listing__actions-list-item {
        float: left;
        margin: 0 floor(@hdeng-spacing / 4) floor(@hdeng-spacing / 4) 0;

        .listing__actions-list--wide & {
            margin-right: 40px;
        }

        &:last-child {
            margin-bottom: floor(@hdeng-spacing / 4);
        }
    }

    .listing__actions-link {
        display: block;
    }

    .listing__actions-img {
        display: block;
    }

    // Shop
    .listing__shop-price {
        font-size: 25px;
        color: #fff;
        margin-bottom: floor(@hdeng-spacing / 4);
        text-align: right;
    }

    .listing__shop-price-unit {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.7px;
        color: @hdeng-boxes-color-reduced;
        margin-right: floor(@hdeng-spacing / 2);
    }

    .listing__shop-form {
        text-align: right;

        .form-group {
            display: inline-block;
            margin: 0;
            vertical-align: middle;

            @media (max-width: @hdeng-breakpoint-mobile) {
                margin: 0 0 floor(@hdeng-spacing / 2);
            }
        }
    }

    .listing__shop-quantity,
    .listing__shop-button {
        margin: 0 0 0 floor(@hdeng-spacing / 4);
    }

    .listing__shop-quantity {
        max-width: 75px;
    }
}
