/*
 *  Copyright 2018 Adobe Systems Incorporated
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

@import (reference) "/apps/weretail/clientlibs/common/variables.less";

@list-teaser-padding-vertical: 20px;
@list-teaser-padding-horizontal: 18px;
@list-grid-gap: 24px;

.we-list {
    .cmp-list__item-date::before {
        content: "\2013\00a0";
    }

    .cmp-image {
        max-width: 60px;
        margin-right: 5px;
    }

    .cmp-image__image {
        margin-bottom: 0 !important; // !important fights responsive grid opinion
    }

    .cmp-list__item-date,
    .cmp-image {
        display: none;
    }

    &.we-list--teaser {
        .cmp-list {
            margin: 0;
            padding: 0;

            list-style-type: none;
        }

        .cmp-list__item {
            position: relative;
            overflow: hidden;
            margin: 0 0 @list-grid-gap;

            background: rgba(0, 0, 0, 0.05);

            > article {
                height: 100%;
            }
        }

        .cmp-list__item-link {
            display: block;
            height: 100%;
            overflow: hidden;

            text-decoration: none;

            &:hover {
                .cmp-list__item-title {
                    text-decoration: underline;
                }
            }
        }

        .cmp-list__item-title {
            display: block;
            padding: @list-teaser-padding-horizontal @list-teaser-padding-vertical;

            line-height: 24px;
            font-weight: 700;
            font-size: 18px;
        }

        .cmp-list__item-date {
            margin-top: -(@list-teaser-padding-vertical / 2);
            padding: 0 @list-teaser-padding-horizontal @list-teaser-padding-vertical;

            font-size: 14px;
            color: #aaa;

            &::before {
                content: "";
            }
        }

        .cmp-list__item-link {
            color: #000;
        }
    }

    &.we-list--block {
        .cmp-list__item-title {
            padding-top: 10px;
            padding-bottom: 10px;

            line-height: 18px;
            font-size: 16px;
        }

        .cmp-list__item-date {
            margin-top: -(10px / 2);
            padding-bottom: 10px;
        }

        .cmp-image {
            float: left;

            width: 40%;
            min-width: 125px;
            max-width: 250px;
            margin-right: 12px;
        }

        .cmp-image__image {
            margin-bottom: 0 !important;
        }

        &.we-list--date {
            .cmp-list__item-date {
                display: block;
            }
        }

        @media (min-width: @screen-xs-min) {
            .cmp-list__item-title {
                line-height: 24px;
                font-size: 18px;
            }

            .cmp-image {
                margin-right: @list-teaser-padding-horizontal;
            }
        }

        @media (min-width: @screen-sm-min) {
            .cmp-list__item-title {
                padding-top: @list-teaser-padding-vertical;
                padding-bottom: @list-teaser-padding-vertical;
            }

            .cmp-list__item-date {
                margin-top: -(@list-teaser-padding-vertical / 2);
                padding-bottom: @list-teaser-padding-vertical;
            }
        }
    }

    &.we-list--grid {
        .cmp-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .cmp-list__item {
            flex: 0 1 auto;

            @media (min-width: @screen-xs-min) {
                flex-basis: ~"calc(50% - (@{list-grid-gap} / 2))";
            }

            @media (min-width: @screen-sm-min) {
                flex-basis: ~"calc(33% - (@{list-grid-gap} / 2))";
            }
        }

        .cmp-image {
            max-width: 100%;
            margin-right: 0;
        }

        &.we-list--date {
            .cmp-list__item-date {
                display: block;
            }
        }

        &.we-list--image {
            .cmp-image {
                display: block;
            }
        }
    }

    &.we-list--date {
        .cmp-list__item-date {
            display: inline;
        }
    }

    &.we-list--image {
        .cmp-image {
            display: inline-block;
        }
    }
}
