<script setup>

</script>
<template>
    <div class="flex-display box">
        <div class="img"></div>
        <div class="flex-fill txt text-tip-1">
            <slot></slot>
        </div>
        <div class="arrow"><span>→</span></div>
    </div>
</template>
<style scoped lang="scss">
@use '@/styles/common.scss';

.box {
    background-color: var(--color-primary-2);
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid var(--color-primary-10);
    color: var(--color-primary-100);
    margin: 10px;
}

.img {
    width: 19px;
    height: 20px;
    background-image: url("@/assets/icons/model.png");
}

.txt {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.arrow {
    border-radius: 50%;
    min-width: 24px;
    width: 24px;
    height: 24px;
    background: var(--color-primary-10);
    display: flex;
    align-items: center;
    justify-content: center;

    span {
        font-size: 22px;
        font-weight: bold;
        position: relative;
        top: -3px;
        /* 向上偏移2px */
    }
}
</style>