/*
 * 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}-citation {
    .cos-space-ml-3xs();
    .cos-space-mr-3xs();
    .cos-inline-block();
    line-height: 16px;
    width: 16px;
    &-link {
        -webkit-tap-highlight-color: transparent;
        &-wrapper {
            .cos-inline();
            cursor: default;
        }
        &-first {
            text-wrap: nowrap;
            .cos-color-text-link();
        }
        &-logo {
            width: 100%;
            height: 100%;

            &-wrapper {
                .cos-space-mr-3xs();
                .cos-color-bg();
                .cos-rounded-full();
                position: relative;
                .cos-inline-block();
                overflow: hidden;
                width: 16px;
                height: 16px;
                vertical-align: middle;
                transform: translateY(-1px);
                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 2;
                    border: 1px solid #dcdde04d;
                    box-sizing: border-box;
                    width: 200%;
                    height: 200%;
                    pointer-events: none;
                    transform: scale(.5) translate(-.25px, -.25px);
                    transform-origin: 0 0;
                    .cos-rounded-xl();
                }
            }
        }
        &-text {
            .cos-color-text-link();
        }
        &-icon {
            .cos-color-text-link();
            .cos-space-mr-3xs();
        }
        &:active {
            .cos-opacity-20();
        }
    }

    &-citationId,
    &-tag-citationId,
    &-aggregated-citationId {
        position: relative;
        top: -1px;
        z-index: 0;
        line-height: 14px;
        margin: var(--cos-space-none) 4px;
        border-radius: 50%;
        .cos-space-p-none();
        font-size: var(--cos-text-caption);
        font-weight: var(--cos-font-medium);
        .cos-text-center();
        white-space: nowrap;
        .cos-color-text-tiny();
        background-color: transparent;
        vertical-align: middle;

        &::after {
            content: '';
            position: absolute;
            top: 47%;
            right: 0;
            bottom: 0;
            left: 50%;
            z-index: -1;
            border-radius: inherit;
            transform: translate(-50%, -50%);
            width: 17px;
            height: 17px;
            background: rgba(223, 223, 245, 0.4);
        }

        &::before {
            content: '';
            position: absolute;
            top: -8px;
            right: -8px;
            bottom: -8px;
            left: -8px;
        }

        &-active {
            &::after {
                background: rgba(223, 223, 245, 0.8);
            }
        }
    }

    &-tag {
        position: relative;
        width: fit-content;
        white-space: nowrap;

        &-citationId {
            // 下面有伪元素也需要设置传入色值，故无法使用行内样式注入，采用css变量方式注入

            /*cosmic-token-disable-next-line*/
            color: var(--cosd-citation-tag-color);

            &::after {
                .cos-rounded-xxs();
                width: calc(100% + 5px);

                /*cosmic-token-disable-next-line*/
                background-color: var(--cosd-citation-tag-bg-color);
            }

            &:active {
                .cos-opacity-60();
            }
        }

        &-text {
            font-size: var(--cos-text-caption);
            white-space: nowrap;

            &::before {
                content: '';
                .cos-space-mr-3xs();
                .cos-space-ml-3xs();
                .cos-inline-block();
                width: 1px;
                height: 8px;

                /*cosmic-token-disable-next-line*/
                background-color: var(--cosd-citation-tag-color);
                opacity: 0.12;
            }

        }
    }
    &-tooltip {
        .cos-color-text-inverse();
        overflow: hidden;
        padding-top: 7.5px;
        .cos-space-pb-sm();
        .cos-text-left();
        .cos-text-body();
        text-decoration: none;
    }
    &-headline {
        .cos-color-text-slim-inverse();
    }
    &-thumbnail {
        margin-top: 4.5px;
        width: 55px;
        height: 55px;
        .cos-space-mr-sm();
        .cos-shrink-0();
    }
    &-title {
        margin: 1.5px var(--cos-space-none) 5px;
        line-height: var(--cos-leading-subtitle-sm);
        word-wrap: break-word;
        &-arrow {
            position: relative;
            top: -1px;
            .cos-space-ml-xxs();
            .cos-rounded-full();
            padding: 1px 2px 2px;
            font-size: var(--cos-text-caption);
            background-color: rgba(81, 81, 81, .5);
        }
    }
    &-source {
        line-height: 16px;
        .cos-color-text-slim-inverse();
        &-logo {
            .cos-shrink-0();
        }
    }
}

.font-size-0 {
    .@{prefix}-citation {
        &-citationId {
            &::after {
                width: 14px;
                height: 14px;
            }
        }
    }
}

.font-size-3,
.font-size-4 {
    .@{prefix}-citation {
        &-citationId {
            &::after {
                top: 50%;
                width: 19px;
                height: 19px;
            }
        }
        &-tag {
            &-citationId {
                &::after {
                    top: 50%;
                    height: 19px;
                }
            }
            &-text {
                &::before {
                    position: relative;
                    top: -1px;
                }
            }
        }
    }
}

@{dark-selectors} {
    .@{prefix}-citation{
        &-citationId {
            &::after {
                background: #34333a;
            }

            &-active::after {
                background: #363445;
            }
        }
    }
}

// 安卓暗黑
@media (prefers-color-scheme: dark) {
    @{t7-kernel-selectors} {
        .@{prefix}-citation {
            &-tag {
                color-scheme: dark;

                &-citationId {
                    color: #263678;

                    &::after {
                        /*cosmic-token-disable-next-line*/
                        background-color: var(--cosd-citation-tag-bg-color);
                    }
                }

                &-text {
                    &::before {
                        background-color: #4e6ef21a;
                    }
                }
            }
        }
    }
}