<template>
  <div class="flex-column">
    <div class="d-flex">
      <div class="d-flex justify-end">
        <span class="d-none d-sm-flex text-right thw-logo-font above mr-2">
          <slot name="above">
            Technisches<br />
            Hilfswerk
          </slot>
        </span>
        <v-img
          class="d-flex"
          max-width="56"
          max-height="56"
          :src="require('../assets/thw.svg')"
        />
      </div>
    </div>
    <v-divider class="d-none d-sm-block my-1" />
    <span class="d-none d-sm-flex text-wrap thw-logo-font below">
      <slot>OV Musterstadt</slot>
    </span>
  </div>
</template>

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

@Component
export default class THWLogo extends Vue {}
</script>

<style scoped>
.flex-column {
  max-width: 240px;
}

.v-divider {
  border-width: 1px;
  border-color: white;
}

.above {
  font-size: 28px;
  line-height: 28px;
}

.below {
  font-size: 15px;
  line-height: 15px;
}
</style>