/*
 * Copyright (c) Baidu, Inc. All Rights Reserved.
 *
 * 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 'variable.less';
@import (reference) 'tokens.less';

.@{prefix}-car-scroll {
    overflow: hidden;
    border-radius: var(--cos-rounded-sm) var(--cos-rounded-sm) var(--cos-rounded-none) var(--cos-rounded-none);    
    .cos-swiper-list {
        .cos-space-pr-none();
        .cos-space-pl-none();
        .cos-space-pb-lg();
    }

    &-item {
        .cos-shrink-0();
    }

    &-card {
        .cos-rounded-sm();
        .cos-block();
        .cos-no-underline();
        .cos-flex();
        .cos-flex-col();
        height: 100%;
    }

    &-image-wrapper {
        overflow: hidden;
        width: 100%;
    }

    &-image {
        .cos-rounded-sm();
        // 154:116 的比例，约等于 77:58
        padding-bottom: (116 / 154) * 100%;
        width: 100%;
        height: 0;
        background-color: #f5f5f5;
    }

    &-content {
        .cos-space-mt-xs();
        .cos-flex();
        .cos-flex-col();
        .cos-flex-1();
        &-multi-line {
            .cos-justify-between();
        }
    }

    &-title {
        .cos-text-subtitle-sm();
        .cos-font-medium();
        .cos-color-text();

        &-1 {
            .cos-line-clamp-1();
        }

        &-2 {
            .cos-line-clamp-2();
        }

        &-3 {
            .cos-line-clamp-3();
        }
    }

    &-bottom {
        .cos-flex();
        .cos-flex-col();
    }

    &-price {
        .cos-text-body();
        .cos-font-medium();
        .cos-color-text-alive();
        &-text {
            .cos-color-text-slim-active();
        }
    }

    &-tags {
        .cos-flex();
        .cos-flex-wrap();
        .cos-space-mt-3xs();
        margin-top: calc(-1 * var(--cos-space-3xs));
        margin-left: calc(-1 * var(--cos-space-3xs));
        > * {
            margin-top: var(--cos-space-3xs);
            margin-left: var(--cos-space-3xs);
        }
    }

    &-tag {
        .cos-tag-color-bg();
        .cos-color-text-tiny-active();
        padding: 2px var(--cos-space-3xs);
        white-space: nowrap;
    }
}