/*
 * 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 (reference) "tokens.less";
@import 'variable.less';

.@{prefix}-question-guide {
    &-title {
        .cos-space-mb-sm();
        .cos-text-body-lg();
        .cos-leading-none();
        display: flex;
        align-items: center;
    }

    &-title-icon {
        .cos-color-text-primary();
        .cos-space-mr-xxs();
        .cos-text-headline-sm();
        .cos-leading-none();
        position: relative;
        top: 1px;
    }

    &-title-img {
        .cos-space-mr-xxs();
        height: calc(16px * var(--font-size-scale, 1));
    }


    &-items {
        overflow: hidden;
        // 最多展示3行，每行高度 = margin + line-height，此处适配大字
        max-height: calc((4px * 2 + 33px * var(--font-size-scale, 1)) * 3);
    }

    &-item {
        .cos-space-pl-sm();
    }

    &-item-label {
        .cos-inline-block();
    }

    &-option {
        .cos-inline-block();

        &-content {
            .cos-inline-block();
            .cos-rounded-sm();
            .cos-space-pl-sm();
            .cos-space-pr-sm();
            .cos-color-bg-dent();
            .cos-font-medium();
            margin: 4px 8px 4px var(--cos-space-none);
            line-height: 33px;
            font-size: var(--cos-text-body);
            cursor: pointer;
            white-space: nowrap;
        }

        &-content:hover {
            .cos-no-underline();
        }

        &-img {
            .cos-space-mr-xxs();
            .cos-inline-block();
            width: calc(18px * var(--font-size-scale, 1));
            height: calc(18px * var(--font-size-scale, 1));
            vertical-align: middle;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-color: transparent;
        }

        &-icon {
            .cos-space-mr-xxs();
            .cos-color-text();
            .cos-text-body-lg();
            vertical-align: middle;
        }

        &-text {
            .cos-inline-block();
            .cos-color-text();
            vertical-align: middle;
        }

        &-caption {
            .cos-inline-block();
            .cos-color-text-minor();
            vertical-align: middle;
            margin-left: 7.5px;
        }
    }

    // 不支持滚动且选项内容超出时，显示省略号
    &-no-scrollable {
        .@{prefix}-question-guide-option {
            max-width: 100%;
            
            &-content {
                display: block;
            }

            &-text {
                .cos-line-clamp-1();
                .cos-inline-block();
                width: 100%;
            }
        }
    }

    // 横滑
    &-scrollable {
        .@{prefix}-question-guide-items {
            overflow-x: scroll;
            // 以下隐藏滚动条
            scrollbar-width: none;
            -ms-overflow-style: none;

            &::-webkit-scrollbar {
                .cos-hidden();
            }

            .cosd-question-guide-item {
                overflow: initial;
                white-space: nowrap;
            }
        }
    }
}