<template>
  <!-- eslint-disable -->
  <svg :height="height" data-name="building" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 870 724.95"><defs><linearGradient x1="251" y1="204.95" x2="251" y2="101.95" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient><linearGradient x1="402" y1="292.48" x2="402" y2="189.48" gradientTransform="matrix(-1, 0, 0, 1, 1020, -87.52)" xlink:href="#56cbcb84-3bc0-4914-a95b-774d22831666"/><linearGradient x1="798" y1="709.95" x2="798" y2="262.95" xlink:href="#56cbcb84-3bc0-4914-a95b-774d22831666"/><linearGradient x1="70" y1="709.95" x2="70" y2="326.95" xlink:href="#56cbcb84-3bc0-4914-a95b-774d22831666"/><linearGradient x1="213" y1="709.95" x2="213" y2="185.95" xlink:href="#56cbcb84-3bc0-4914-a95b-774d22831666"/><linearGradient x1="364.5" y1="797.48" x2="364.5" y2="273.48" gradientTransform="matrix(-1, 0, 0, 1, 1020, -87.52)" xlink:href="#56cbcb84-3bc0-4914-a95b-774d22831666"/><linearGradient x1="435" y1="724.95" x2="435" y2="58.95" xlink:href="#56cbcb84-3bc0-4914-a95b-774d22831666"/></defs><title>Building</title><circle cx="605.89" cy="78.11" r="78.11" fill="#ff5252"/><rect x="210" y="101.95" width="82" height="103" fill="url(#56cbcb84-3bc0-4914-a95b-774d22831666)"/><rect x="577" y="101.95" width="82" height="103" fill="url(#e379aacb-d978-4b26-b6a3-50696be8e652)"/><rect x="216" y="106.95" width="76" height="98" :fill="primaryColor"/><rect x="578" y="106.95" width="76" height="98" :fill="primaryColor"/><rect x="726" y="262.95" width="144" height="447" fill="url(#f15650fa-0d49-4c1b-b489-142025d26956)"/><rect x="720" y="265.95" width="145" height="432" fill="#fff"/><rect y="326.95" width="140" height="383" fill="url(#84352290-18fb-412c-994b-f360002bca3b)"/><rect x="6" y="331.95" width="140" height="366" fill="#fff"/><rect x="140" y="185.95" width="146" height="524" fill="url(#8d0d6924-da2f-4d5c-b20d-8b78d173dd10)"/><rect x="585" y="185.95" width="141" height="524" fill="url(#5c646475-b98d-4809-afbb-cfdad2f2d853)"/><rect x="146" y="189.95" width="146" height="508" fill="#fff"/><rect x="578" y="189.95" width="142" height="508" fill="#fff"/><g opacity="0.2"><rect x="624" y="223.95" width="50" height="142" :fill="primaryColor"/><rect x="624" y="445.95" width="50" height="142" :fill="primaryColor"/></g><g opacity="0.2"><rect x="624" y="447.95" width="50" height="108" fill="#64ffda"/></g><g opacity="0.2"><rect x="624" y="223.95" width="50" height="108" fill="#64ffda"/></g><rect x="39" y="368.95" width="90" height="64" fill="#e0e0e0"/><rect x="748" y="299.95" width="90" height="64" fill="#e0e0e0"/><rect x="748" y="400.95" width="90" height="64" fill="#e0e0e0"/><rect x="292" y="67.95" width="286" height="648" :fill="primaryColor"/><rect x="748" y="501.95" width="90" height="64" fill="#e0e0e0"/><rect x="39" y="469.95" width="90" height="64" fill="#e0e0e0"/><rect x="39" y="570.95" width="90" height="64" fill="#e0e0e0"/><rect x="39" y="368.95" width="90" height="46" :fill="primaryColor" opacity="0.5"/><rect x="39" y="469.95" width="90" height="46" :fill="primaryColor" opacity="0.5"/><rect x="39" y="570.95" width="90" height="46" :fill="primaryColor" opacity="0.5"/><rect x="748" y="299.95" width="90" height="39" :fill="primaryColor" opacity="0.5"/><rect x="748" y="400.95" width="90" height="39" :fill="primaryColor" opacity="0.5"/><rect x="748" y="501.95" width="90" height="39" :fill="primaryColor" opacity="0.5"/><rect x="285" y="58.95" width="300" height="666" fill="url(#df1b48e6-fc4c-4eb9-a636-7647bc3b1c14)"/><rect x="325" y="92.95" width="78" height="138" fill="#fff"/><rect x="325" y="277.95" width="78" height="138" fill="#fff"/><rect x="325" y="462.95" width="78" height="138" fill="#fff"/><rect x="632" y="180.48" width="78" height="138" transform="translate(1177 411.43) rotate(-180)" fill="#fff"/><rect x="632" y="365.48" width="78" height="138" transform="translate(1177 781.43) rotate(-180)" fill="#fff"/><rect x="632" y="550.48" width="78" height="138" transform="translate(1177 1151.43) rotate(-180)" fill="#fff"/><rect x="325" y="92.95" width="78" height="108" :fill="primaryColor" opacity="0.2"/><rect x="467" y="92.95" width="78" height="108" :fill="primaryColor" opacity="0.2"/><rect x="325" y="277.95" width="78" height="108" :fill="primaryColor" opacity="0.2"/><rect x="467" y="277.95" width="78" height="108" :fill="primaryColor" opacity="0.2"/><rect x="325" y="462.95" width="78" height="108" :fill="primaryColor" opacity="0.2"/><rect x="467" y="462.95" width="78" height="108" :fill="primaryColor" opacity="0.2"/><g opacity="0.2"><rect x="202" y="223.95" width="50" height="142" :fill="primaryColor"/><rect x="202" y="445.95" width="50" height="142" :fill="primaryColor"/></g><g opacity="0.2"><rect x="202" y="223.95" width="50" height="108" fill="#64ffda"/></g><g opacity="0.2"><rect x="202" y="447.95" width="50" height="108" fill="#64ffda"/></g><rect x="403" y="617.95" width="64" height="98" fill="#fff"/></svg>
  <!-- eslint-enable -->
</template>

<script>
export default {
  name: 'UndrawBuilding',
  props: {
    /** Sets primaryColor of the illustration */
    primaryColor: {
      type: String,
      default: '#6c63ff'  
    },
    /** Sets height of the illustration */
    height: {
      type: String,
      default: '100'  
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
