/*
 * 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';

@keyframes cosd-searching-steps-fade-in {
    from {
        .cos-opacity-0();
    }
    to {
        .cos-opacity-100();
    }
}
@keyframes cosd-searching-steps-icon-finish-show {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}
@keyframes cosd-searching-steps-icon-process-breath {
    0% {
        scale: 70%;
        .cos-opacity-50();
    }
    23% {
        scale: 100%;
        .cos-opacity-20();
    }
    27% {
        scale: 100%;
        .cos-opacity-20();
    }
    50% {
        scale: 70%;
        .cos-opacity-50();
    }
    73% {
        scale: 100%;
        .cos-opacity-20();
    }
    77% {
        scale: 100%;
        .cos-opacity-20();
    }
    100% {
        scale: 70%;
        .cos-opacity-50();
    }
}

.@{prefix}-searching-step {
    .cos-flex();
    .cos-items-center();
    & + .@{prefix}-searching-step {
        .cos-space-mt-md();
    }
    &-icon {
        .cos-flex();
        .cos-items-center();
        .cos-justify-center();
        .cos-space-mr-xxs();
        .cos-shrink-0();
        .cos-rounded-full();
        width: 15px;
        height: 15px;
        &-main {
            position: absolute;
            left: 0;
            overflow: hidden;
            height: 100%;
            animation: cosd-searching-steps-icon-finish-show .4s ease-out forwards;
        }
        &-check {
            .cos-flex();
            .cos-items-center();
            .cos-justify-center();
            .cos-text-caption-sm();
            position: absolute;
            top: 1px;
            left: 0;
            width: 15px;
            height: 15px;

            // token 内的 medium 不够粗，这里手动加粗
            font-weight: 700;
        }
    }
    &-wait {
        .@{prefix}-searching-step-icon {
            .cos-color-bg-dent();
        }
    }
    &-process {
        .@{prefix}-searching-step-icon {
            .cos-color-bg-primary();
            transform-origin: center center;
            animation: cosd-searching-steps-icon-process-breath 2.4s ease-in-out infinite;
        }
        .@{prefix}-searching-step-content {
            .cos-color-text-primary();
        }
    }
    &-finish {
        .@{prefix}-searching-step-icon {
            position: relative;
            &::before {
                content: '';
                .cos-rounded-full();
                .cos-color-bg-dent();
                position: absolute;
                width: 100%;
                height: 100%;
                animation: cosd-searching-steps-fade-in .4s ease-out forwards;
            }
        }
    }
    &-content {
        .cos-line-clamp-1();
        .cos-color-text();
        .cos-text-body-lg();
        margin: -4px var(--cos-space-none) -5px;
    }
    &-description {
        .cos-space-ml-sm();
        animation: cosd-searching-steps-fade-in .2s ease-out;
    }
}