<template>
  <span><span class="color-swatch" :style="{ background: item.hexColor }"></span>{{item.displayName}}</span>
</template>

<style lang="scss">
.color-swatch {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: -1px 3px 0 -3px;
  border: 3px solid rgba(#ccc, .7);
  border-radius: 0.25rem;
  vertical-align: middle;
}
.popup .color-swatch {
  border-color: rgba(#fff, .7);
}
</style>

<script>
export default {
  props: ['item'],
};
</script>
