<style lang="scss">
.mdi-icon {
  align-items: center;
  display: inline-flex;
  font-feature-settings: "liga";
  font-size: 24px;
  justify-content: center;
  letter-spacing: normal;
  line-height: 1;
  position: relative;
  text-indent: 0;
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), visibility 0s;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  &--left {
    margin-right: 5px;
  }
  &--right {
    margin-left: 5px;
  }
}
</style>
<script>
import { Vue, Component } from 'vue-property-decorator';

export default @Component({
  functional: true,
  name: 'mdiIcon'
})
class mdiIcon extends Vue {
  render (createElement, { data, slots, children, props, listeners }) {
    const defaultSlot = slots().default;
    if (!defaultSlot) {
      return;
    }
    const [node] = defaultSlot;
    const icon = (node.text || '').trim();
    let alignClass = '';
    if (typeof props.dark !== 'undefined') {
      alignClass = 'text-white';
    }
    if (typeof props.left !== 'undefined') {
      alignClass = 'mdi-icon--left';
    }
    if (typeof props.right !== 'undefined') {
      alignClass = 'mdi-icon--right';
    }
    const attrs = {
      staticClass: `mdi-icon notranslate mdi ${icon} ${alignClass} ${data.staticClass || ''}`,
      on: {
        click: e => listeners.click && listeners.click(e)
      }
    };
    if (typeof props.small !== 'undefined') {
      attrs.style = { 'font-size': '16px' };
    }
    if (typeof props.size !== 'undefined') {
      attrs.style = { 'font-size': `${props.size}px` };
    }
    return createElement(
      'i',
      attrs
    );
  }
}
</script>
