<template>
    <div class="flex-display box">
        <div class="img">
            <img src="@/assets/icons/box-footer-left-icon.png" alt="">
        </div>
        <div class="flex-fill txt text-tip-1">
            <slot></slot>
        </div>
        <div class="arrow">
            <img src="@/assets/icons/box-footer-right-icon.png" alt="">
        </div>
    </div>
</template>
<script setup>

</script>
<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;

    img {
        width: 100%;
        height: 100%;
    }
}

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

.arrow {
    width: 24px;
    height: 24px;

    img {
        width: 100%;
        height: 100%;
    }
}
</style>