<template>
    <div
        :class="componentClasses"
    >
        <svg
            id="Livello_1"
            data-name="Livello 1"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 447.83 121.4"
            height="40px"
        >
            <path
                class="cls-3"
                d="M65.76,28.92c0-4.7-2.34-7.09-7.01-7.09l-18.7-.05c-14.02,0-20.99,6.32-20.9,18.97-.05,12.94,7.01,19.4,21.13,19.31h4.53c4.58.1,6.92,1.68,6.92,4.84-.09,3.26-2.43,4.89-7.06,4.89h-18.89c-4.49.05-6.78,2.54-6.78,7.52,0,4.46,2.29,6.66,6.82,6.61l18.93.05c13.84,0,20.8-6.42,20.89-19.16,0-12.55-6.96-18.93-20.89-19.17h-4.54c-4.81,0-7.2-1.53-7.2-4.6,0-3.26,2.38-4.89,7.15-4.89h18.75c4.44-.1,6.73-2.49,6.83-7.24ZM105.68,29.01v67.13c0,4.74,2.34,7.14,7.01,7.14s7.01-2.44,7.01-7.33v-11.98h16.45c14.02,0,21.04-7.33,21.04-22.04v-18.64c0-14.37-7.06-21.61-21.13-21.61h-23.47c-4.63,0-6.92,2.44-6.92,7.33ZM136.06,36.15c4.72,0,7.11,2.35,7.11,6.95v19.12c0,4.93-2.38,7.38-7.11,7.38h-16.36v-33.44h16.36Z"
                style=" fill-rule: evenodd;stroke-width: 0px; fill: #ffff;"
            />
            <path
                class="cls-3"
                d="M268.84,84.06c4.77-.1,7.15-2.49,7.15-7.23V29.05c0-4.84-2.34-7.28-6.92-7.28s-7.11,2.44-7.11,7.28v40.54h-11.59c-4.77,0-7.11-2.44-7.11-7.38V28.96c0-4.84-2.34-7.28-7.01-7.28s-7.01,2.4-7.01,7.19l.09,40.73h-11.64c-4.77,0-7.15-2.44-7.15-7.38V28.96c0-4.84-2.34-7.28-7.01-7.28s-7.01,2.4-7.01,7.19v33.06c0,14.71,7.01,22.04,21.04,22.04l51.28.1h0ZM362.62,28.91c0-4.7-2.34-7.09-7.01-7.09l-18.7-.05c-14.02,0-20.99,6.32-20.9,18.97-.05,12.94,7.01,19.4,21.13,19.31h4.53c4.58.1,6.92,1.68,6.92,4.84-.09,3.26-2.43,4.89-7.06,4.89h-18.89c-4.49.05-6.78,2.54-6.78,7.52,0,4.46,2.29,6.66,6.82,6.61l18.93.05c13.84,0,20.8-6.42,20.89-19.16,0-12.55-6.96-18.93-20.89-19.17h-4.54c-4.81,0-7.2-1.53-7.2-4.6,0-3.26,2.38-4.89,7.15-4.89h18.75c4.44-.1,6.73-2.49,6.83-7.24ZM423.53,76.97c0-4.79-2.29-7.24-6.87-7.24l-23.47-.05c-4.77,0-7.15-2.44-7.15-7.33v-2.4l21.13-.05c4.68,0,6.96-2.3,6.96-7s-2.38-7.33-7.1-7.43l-20.99.1v-9.58l30.29.05c4.72-.1,7.1-2.44,7.15-7.14,0-4.79-2.48-7.14-7.34-7.14h-37.12c-4.68,0-7.01,2.39-7.01,7.19v33.06c0,14.71,7.01,22.04,21.04,22.04h23.47c4.68,0,7.01-2.35,7.01-7.09h0Z"
                style=" fill-rule: evenodd;stroke-width: 0px; fill: #ffff;"
            />
            <path
                class="cls-1"
                d="M175.99,25.08c1.5,0,2.99.43,4.49,1.25,1.5.81,2.62,1.96,3.46,3.5.84,1.53,1.26,3.16,1.26,4.79s-.42,3.21-1.22,4.7c-.84,1.53-1.96,2.68-3.46,3.5-1.5.86-2.99,1.25-4.53,1.25-1.64,0-3.18-.38-4.63-1.25-1.5-.81-2.62-1.96-3.46-3.5-.81-1.43-1.23-3.05-1.22-4.7,0-1.63.37-3.26,1.22-4.79.84-1.53,1.96-2.68,3.46-3.5,1.5-.81,3.04-1.25,4.63-1.25Z"
                style=" fill-rule: evenodd;stroke-width: 0px;  fill: #72bb6f;"
            />
            <path
                class="cls-2"
                d="M175.99,60.27c1.5,0,2.99.43,4.49,1.25,1.5.82,2.62,1.97,3.46,3.5.84,1.53,1.26,3.16,1.26,4.79s-.42,3.16-1.22,4.7c-.84,1.53-1.96,2.68-3.46,3.5-1.5.86-2.99,1.25-4.53,1.25-1.64,0-3.18-.38-4.63-1.25-1.5-.82-2.62-1.96-3.46-3.5-.8-1.43-1.22-3.05-1.22-4.7,0-1.63.37-3.26,1.22-4.79.84-1.53,1.96-2.68,3.46-3.5,1.5-.81,3.04-1.25,4.63-1.25Z"
                style=" fill-rule: evenodd;stroke-width: 0px;fill:  #00624f"
            />
            <path
                class="cls-3"
                d="M93.08,28.93c-.05-4.78-2.38-7.13-7.1-7.13s-6.92,2.39-6.92,7.28v47.77h.02c.05,4.77,2.38,7.12,7.1,7.12s6.92-2.39,6.92-7.28V28.92h-.02Z"
                style=" fill-rule: evenodd;stroke-width: 0px; fill: #ffff;"
            />
            <path
                class="cls-3"
                d="M303.9,28.93c-.05-4.78-2.38-7.13-7.1-7.13s-6.92,2.39-6.92,7.28v47.77h.02c.05,4.77,2.38,7.12,7.1,7.12s6.92-2.39,6.92-7.28V28.92h-.02Z"
                style=" fill-rule: evenodd;stroke-width: 0px; fill: #ffff;"
            />
        </svg>
    </div>
</template>

<script>
export default {
    name: 'CscLogo',
    props: {
        color: {
            type: String,
            default: 'none'
        }
    },
    computed: {
        componentClasses () {
            const classes = ['logo']
            if (this.color === 'light') {
                classes.push('logo-light')
            }

            return classes
        }
    }
}
</script>

<style lang="sass" rel="stylesheet/sass">
    .logo-light
        path
            fill: #ffff !important
</style>
