<template>
  <div class="inline-code" :class="classObject">
    <code>
      <slot />
    </code>
  </div>
</template>

<script>
export default {
  name: 'ChecInlineCode',
  props: {
    variant: {
      type: String,
      default: 'light',
      validator: function validator(value) {
        return ['dark', 'light'].includes(value);
      },
    },
  },
  computed: {
    classObject() {
      return [
        this.variant !== 'light' ? `inline-code--${this.variant}` : '',
      ];
    },
  },
};
</script>

<style scoped lang="scss">
.inline-code {
  &--light {
    @apply py-1 px-2 rounded-sm text-xs font-mono tracking-wide bg-gray-200 text-gray-600;
  }

  &--dark {
    @apply py-1 px-2 rounded-sm text-xs border border-white font-mono tracking-wide text-white bg-white opacity-10;
  }
}
</style>
