/*
 * 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}-site-vcard-list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .cos-vcard-color-bg();
    .cos-rounded-md();

    & a:hover {
        text-decoration: none;
    }

    //按新设计覆盖原来site-vcard卡内部的样式
    .@{prefix}-site-vcard {
        &-filled,
        &-card,
        &-bar {
            .cos-vcard-color-bg();
            .cos-rounded-none();
        }

        &-caption {
            padding-top: calc(var(--cos-space-xs) + 1px);
        }
    }

    //两张site-vcard卡间距21px
    &-group + &-group {
        .cos-space-mt-3xs();
    }

    .@{prefix}-site-vcard-list-item-container + .@{prefix}-site-vcard-list-item-container {
        .cos-space-mt-3xs();
    }

    &-group-animating {
        transform-origin: top;
        animation: SiteVcardListShow 300ms ease-out;
    }

    &-fold {
        .cos-flex();
        .cos-justify-center();
        .cos-items-center();
        margin-top: -8px;
        margin-bottom: -2px;
        -webkit-tap-highlight-color: transparent;
    }
}

@keyframes SiteVcardListShow {
    0% {
        max-height: 0;
        .cos-opacity-0();
    }
    99% {
        max-height: 400px;
        .cos-opacity-100();
    }
    100% {
        max-height: 7000px;
        .cos-opacity-100();
    }
}