<template>
  <svg viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="150" height="150" rx="7" :fill="fillColor" />
    <mask
      id="path-2-outside-1"
      maskUnits="userSpaceOnUse"
      x="31.91"
      y="37.351"
      width="64"
      height="81"
      fill="black"
    >
      <rect fill="white" x="31.91" y="37.351" width="64" height="81" />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M70.0845 40.147C66.3552 38.9497 62.3605 38.351 58.1004 38.351H32.91V116.554H58.6375C65.4051 116.518 71.5282 114.907 77.0067 111.72C82.521 108.497 86.7821 104.057 89.7899 98.3998C92.8335 92.7065 94.3553 86.2791 94.3553 79.1176V75.519C94.3421 72.893 94.1176 70.3628 93.6819 67.9284L67.0636 49.9142L70.0845 40.147ZM51.7625 102.052V52.9067H58.1004C63.6506 52.9067 67.8758 54.8224 70.7762 58.6537C73.6766 62.4851 75.1268 68.1785 75.1268 75.7338V79.1176C75.1268 86.7088 73.6766 92.4379 70.7762 96.3051C67.8758 100.136 63.7222 102.052 58.3153 102.052H51.7625Z"
      />
    </mask>
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M70.0845 40.147C66.3552 38.9497 62.3605 38.351 58.1004 38.351H32.91V116.554H58.6375C65.4051 116.518 71.5282 114.907 77.0067 111.72C82.521 108.497 86.7821 104.057 89.7899 98.3998C92.8335 92.7065 94.3553 86.2791 94.3553 79.1176V75.519C94.3421 72.893 94.1176 70.3628 93.6819 67.9284L67.0636 49.9142L70.0845 40.147ZM51.7625 102.052V52.9067H58.1004C63.6506 52.9067 67.8758 54.8224 70.7762 58.6537C73.6766 62.4851 75.1268 68.1785 75.1268 75.7338V79.1176C75.1268 86.7088 73.6766 92.4379 70.7762 96.3051C67.8758 100.136 63.7222 102.052 58.3153 102.052H51.7625Z"
      fill="white"
    />
    <path
      d="M70.0845 40.147L71.0399 40.4425L71.3322 39.4973L70.3902 39.1949L70.0845 40.147ZM32.91 38.351V37.351H31.91V38.351H32.91ZM32.91 116.554H31.91V117.554H32.91V116.554ZM58.6375 116.554L58.6375 117.554L58.6428 117.554L58.6375 116.554ZM77.0067 111.72L77.5095 112.585L77.5113 112.584L77.0067 111.72ZM89.7899 98.3998L88.908 97.9284L88.9069 97.9304L89.7899 98.3998ZM94.3553 75.519L95.3553 75.519L95.3553 75.5139L94.3553 75.519ZM93.6819 67.9284L94.6662 67.7523L94.5919 67.3368L94.2423 67.1003L93.6819 67.9284ZM67.0636 49.9142L66.1083 49.6188L65.8893 50.3269L66.5032 50.7424L67.0636 49.9142ZM51.7625 52.9067V51.9067H50.7625V52.9067H51.7625ZM51.7625 102.052H50.7625V103.052H51.7625V102.052ZM70.7762 96.3051L71.5735 96.9087L71.5762 96.9051L70.7762 96.3051ZM58.1004 39.351C62.2657 39.351 66.1565 39.9362 69.7788 41.0992L70.3902 39.1949C66.5538 37.9632 62.4552 37.351 58.1004 37.351V39.351ZM32.91 39.351H58.1004V37.351H32.91V39.351ZM33.91 116.554V38.351H31.91V116.554H33.91ZM58.6375 115.554H32.91V117.554H58.6375V115.554ZM76.5039 110.856C71.1868 113.949 65.2373 115.519 58.6323 115.554L58.6428 117.554C65.573 117.517 71.8696 115.865 77.5095 112.585L76.5039 110.856ZM88.9069 97.9304C85.9859 103.425 81.8556 107.728 76.5021 110.857L77.5113 112.584C83.1864 109.267 87.5782 104.69 90.6729 98.8693L88.9069 97.9304ZM93.3553 79.1176C93.3553 86.1329 91.8659 92.3954 88.908 97.9284L90.6718 98.8713C93.8011 93.0176 95.3553 86.4252 95.3553 79.1176H93.3553ZM93.3553 75.519V79.1176H95.3553V75.519H93.3553ZM92.6975 68.1046C93.1225 70.4792 93.3423 72.9519 93.3553 75.524L95.3553 75.5139C95.3418 72.8341 95.1126 70.2465 94.6662 67.7523L92.6975 68.1046ZM94.2423 67.1003L67.6241 49.0861L66.5032 50.7424L93.1214 68.7566L94.2423 67.1003ZM68.019 50.2097L71.0399 40.4425L69.1292 39.8516L66.1083 49.6188L68.019 50.2097ZM50.7625 52.9067V102.052H52.7625V52.9067H50.7625ZM58.1004 51.9067H51.7625V53.9067H58.1004V51.9067ZM71.5735 58.0502C68.4531 53.9282 63.9086 51.9067 58.1004 51.9067V53.9067C63.3925 53.9067 67.2985 55.7165 69.9789 59.2573L71.5735 58.0502ZM76.1268 75.7338C76.1268 68.077 74.6617 62.1296 71.5735 58.0502L69.9789 59.2573C72.6916 62.8407 74.1268 68.28 74.1268 75.7338H76.1268ZM76.1268 79.1176V75.7338H74.1268V79.1176H76.1268ZM71.5762 96.9051C74.6617 92.7911 76.1268 86.81 76.1268 79.1176H74.1268C74.1268 86.6076 72.6915 92.0848 69.9762 95.7051L71.5762 96.9051ZM58.3153 103.052C63.9905 103.052 68.4586 101.024 71.5735 96.9087L69.9789 95.7015C67.2931 99.2495 63.4539 101.052 58.3153 101.052V103.052ZM51.7625 103.052H58.3153V101.052H51.7625V103.052Z"
      :fill="fillColor"
      mask="url(#path-2-outside-1)"
    />
    <path d="M81.7901 11L117.64 28.0225L110.437 76.2374L70.0636 48.9142L81.7901 11Z" fill="white" />
    <path
      d="M108.985 73.5541C117.778 88.5955 126.105 118.786 89.0659 119.215C52.0269 119.645 35.589 132.287 32 138.554"
      stroke="white"
      stroke-width="2.5"
      stroke-linecap="round"
    />
  </svg>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'nuxt-property-decorator';

@Component
export default class LogoThumbnailComponent extends Vue {
  @Prop({ default: '#2B6CB0' })
  readonly fillColor!: string;
}
</script>

<style></style>
