<template>
    <svg class="component-svg" width="160" height="120" viewBox="0 0 160 120" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="80" cy="60" r="60" fill="var(--component-c-0)" />
        <path d="M37 23C37 20.7909 38.7909 19 41 19H101C103.209 19 105 20.7909 105 23V97C105 99.2091 103.209 101 101 101H45C40.5817 101 37 97.4183 37 93V23Z" fill="var(--component-c-1)" />
        <path d="M112.048 91H49.0484C49.8484 95.4 46.715 99.5 45.0484 101H107.548C114.348 100.6 113.382 94.1667 112.048 91Z" fill="var(--component-c-2)" />
        <path d="M121.5 5.5L114.883 19.2063C114.791 19.3981 115.022 19.5824 115.188 19.4494L127 10L121.5 5.5Z" fill="#FFACAD" />
        <path
            d="M121.68 21.3628L115.49 27.0342C115.145 27.3502 115.385 27.9246 115.852 27.9022L124.153 27.5051C124.496 27.4887 124.721 27.1389 124.593 26.8199L122.482 21.5456C122.352 21.2211 121.938 21.1266 121.68 21.3628Z"
            fill="#FFD6D2"
        />
        <path d="M37 22C37 19.7909 38.7909 18 41 18H101C103.209 18 105 19.7909 105 22V32H37V22Z" fill="#0077CE" />
        <path d="M37 22C37 19.7909 38.7909 18 41 18H101C103.209 18 105 19.7909 105 22V30H37V22Z" fill="#20A0FF" />
        <circle cx="44" cy="25" r="2" fill="#0077CE" />
        <circle cx="51" cy="25" r="2" fill="#0077CE" />
        <circle cx="60" cy="25" r="2" fill="#0077CE" />
        <rect x="45" y="38" width="14" height="4" fill="var(--component-c-3)" />
        <rect x="45" y="55" width="14" height="4" fill="var(--component-c-3)" />
        <rect x="45" y="45" width="50" height="4" fill="var(--component-c-4)" />
        <rect x="45" y="62" width="50" height="4" fill="var(--component-c-4)" />
        <rect x="61" y="75" width="20" height="6" rx="3" fill="#20A0FF" />
        <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M87 42C85.8954 42 85 42.8954 85 44V69C85 70.1046 85.8954 71 87 71H96.6154L98 75.5H100.5L99.15 71H132C133.105 71 134 70.1046 134 69V44C134 42.8954 133.105 42 132 42H87Z"
            fill="var(--component-c-5)"
        />
        <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M89 42C87.8954 42 87 42.8954 87 44V69C87 70.1046 87.8954 71 89 71H98.6154L100 75.5L104.154 71H134C135.105 71 136 70.1046 136 69V44C136 42.8954 135.105 42 134 42H89Z"
            fill="var(--component-c-6)"
        />
        <path
            d="M103.391 61.7402L94.2305 57.1895V56.4473L103.391 51.3984V53.0879L96.584 56.75V56.7988L103.391 60.0605V61.7402ZM114.943 47.873L107.688 65.5098H105.9L113.156 47.873H114.943ZM126.789 57.1699L117.629 61.7207V60.041L124.445 56.8086V56.7402L117.629 53.0781V51.3887L126.789 56.4277V57.1699Z"
            fill="var(--component-c-7)"
        />
    </svg>
</template>

<style scoped lang="scss">
.component-svg {
    --component-c-0: #eff5fd;
    --component-c-1: white;
    --component-c-2: #d9edfe;
    --component-c-3: var(--component-c-2);
    --component-c-4: var(--component-c-2);
    --component-c-5: #6496dc;
    --component-c-6: #80a8e1;
    --component-c-7: #dff2ff;
}
.dark .component-svg {
    --component-c-0: #272b31;
    --component-c-1: #273751;
    --component-c-2: #394c68;
    --component-c-3: #20a0ff;
    --component-c-4: #384692;
    --component-c-5: #263346;
    --component-c-6: #3a5a88;
    --component-c-7: white;
}
</style>
