diff --git a/dist/vue-flag-rollup.cjs.js b/dist/vue-flag-rollup.cjs.js
index fa78bd3..b6da36a 100644
--- a/dist/vue-flag-rollup.cjs.js
+++ b/dist/vue-flag-rollup.cjs.js
@@ -11,9 +11,6 @@ var script = {
   computed: {
     imageUrl() {
       return flagpackCore.imageUrl(flagpackCore.isoToCountryCode(this.code).toUpperCase(), this.size.toLowerCase())
-    },
-    styles() {
-      return this.customBorderRadius && {'border-radius': `${this.customBorderRadius}px`}
     }
   },
   props: {
@@ -34,15 +31,12 @@ var script = {
     },
     hasBorder: {
       type: Boolean,
-      default: false
+      default: true
     },
     hasBorderRadius: {
       type: Boolean,
       default: true,
     },
-    customBorderRadius: {
-      type: String,
-    },
     gradient: {
       type: String,
       validator: value => (
@@ -214,11 +208,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-5af92868_0", { source: ".flag[data-v-5af92868] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n}\n.flag.size-s[data-v-5af92868] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-5af92868] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-5af92868] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-5af92868] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-5af92868] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-5af92868] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-5af92868] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-5af92868] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-5af92868] {\n  border-radius: 2px;\n}\n.flag.border[data-v-5af92868]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  width: calc(100% - 2px);\n  height: calc(100% - 2px);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius[data-v-5af92868]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  border-radius: 1px;\n}\n.flag.top-down[data-v-5af92868]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear[data-v-5af92868]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular[data-v-5af92868]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img[data-v-5af92868] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */", map: {"version":3,"sources":["/Users/donovanroubos/Code/Yummygum/vue-flag-pack/src/Flag.vue","Flag.vue"],"names":[],"mappings":"AA+EA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;AC9EA;ADiFA;EACA,WAAA;EACA,YAAA;AC/EA;ADiFA;EACA,4CAAA;AC/EA;ADkFA;EACA,kBAAA;AChFA;ADoFA;EACA,WAAA;EACA,YAAA;AClFA;ADoFA;EACA,0CAAA;AClFA;ADqFA;EACA,oBAAA;ACnFA;ADuFA;EACA,WAAA;EACA,YAAA;ACrFA;ADuFA;EACA,0CAAA;ACrFA;ADwFA;EACA,kBAAA;ACtFA;AD4FA;EAvDA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EAoDA,uBAAA;EACA,wBAAA;EACA,oCAAA;EACA,uBAAA;ACrFA;AD0FA;EAjEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EA8DA,kBAAA;ACnFA;ADwFA;EAxEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EAqEA,6FAAA;ACjFA;ADsFA;EA/EA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EA4EA,kQAAA;AC/EA;ADoFA;EAtFA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EAmFA,ygBAAA;AC7EA;ADkFA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;AChFA;;AAEA,mCAAmC","file":"Flag.vue","sourcesContent":["<template>\n  <div\n    :style=\"[styles]\"\n    :class=\"[\n      'flag',\n      `size-${size}`,\n      {'border-radius': hasBorderRadius },\n      {'border': hasBorder },\n      {'drop-shadow': hasDropShadow},\n      gradient,\n      className\n    ]\">\n    <img :src=\"imageUrl\">\n  </div>\n</template>\n\n<script>\nimport { isoToCountryCode, imageUrl } from 'flagpack-core'\n\nexport default {\n  name: 'Flag',\n  computed: {\n    imageUrl() {\n      return imageUrl(isoToCountryCode(this.code).toUpperCase(), this.size.toLowerCase())\n    },\n    styles() {\n      return this.customBorderRadius && {'border-radius': `${this.customBorderRadius}px`}\n    }\n  },\n  props: {\n    size: {\n      type: String,\n      default: 'm',\n      validator: value => (\n        ['s', 'm', 'l'].indexOf(value) !== -1\n      ),\n    },\n    code: {\n      type: String,\n      default: '528'\n    },\n    hasDropShadow: {\n      type: Boolean,\n      default: false,\n    },\n    hasBorder: {\n      type: Boolean,\n      default: false\n    },\n    hasBorderRadius: {\n      type: Boolean,\n      default: true,\n    },\n    customBorderRadius: {\n      type: String,\n    },\n    gradient: {\n      type: String,\n      validator: value => (\n        ['top-down', 'real-linear', 'real-circular'].indexOf(value) !== -1\n      ),\n    },\n    className: {\n      type: String\n    }\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n@mixin before-styling {\n  content: '';\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n}\n\n.flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n\n  &.size {\n    &-s {\n      width: 16px;\n      height: 12px;\n\n      &.drop-shadow {\n        box-shadow: 0 0 1px 0.5px rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1px;\n      }\n    }\n\n    &-m {\n      width: 20px;\n      height: 15px;\n\n      &.drop-shadow {\n        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1.5px;\n      }\n    }\n\n    &-l {\n      width: 32px;\n      height: 24px;\n\n      &.drop-shadow {\n        box-shadow: 0 2px 3px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 2px;\n      }\n    }\n  }\n\n  &.border {\n    &::before {\n      @include before-styling();\n      width: calc(100% - 2px);\n      height: calc(100% - 2px);\n      border: 1px solid rgba(0, 0, 0, .5);\n      mix-blend-mode: overlay;\n    }\n  }\n\n  &.border-radius {\n    &::before {\n      @include before-styling();\n      border-radius: 1px;\n    }\n  }\n\n  &.top-down {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(0deg, rgba(0,0,0,0.30) 2%, rgba(255,255,255,0.70) 100%);\n    }\n  }\n\n  &.real-linear {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(45deg, rgba(0,0,0,0.20) 0%, rgba(39,39,39,0.22) 11%, rgba(255,255,255,0.30) 27%, rgba(0,0,0,0.24) 41%, rgba(0,0,0,0.55) 52%, rgba(255,255,255,0.26) 63%, rgba(0,0,0,0.27) 74%, rgba(255,255,255,0.30) 100%);\n    }\n  }\n\n  &.real-circular {\n    &::before {\n      @include before-styling();\n      background: radial-gradient(50% 36%, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.24) 11%, rgba(0,0,0,0.55) 17%, rgba(255,255,255,0.26) 22%, rgba(0,0,0,0.17) 27%, rgba(255,255,255,0.28) 31%, rgba(255,255,255,0.00) 37%) center calc(50% - 8px) / 600% 600%,\n                  radial-gradient(50% 123%, rgba(255,255,255,0.30) 25%, rgba(0,0,0,0.24) 48%, rgba(0,0,0,0.55) 61%, rgba(255,255,255,0.26) 72%, rgba(0,0,0,0.17) 80%, rgba(255,255,255,0.28) 88%, rgba(255,255,255,0.30) 100%) center calc(50% - 8px) / 600% 600%;\n    }\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n</style>\n",".flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n}\n.flag.size-s {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius {\n  border-radius: 1px;\n}\n.flag.size-m {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius {\n  border-radius: 1.5px;\n}\n.flag.size-l {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius {\n  border-radius: 2px;\n}\n.flag.border::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  width: calc(100% - 2px);\n  height: calc(100% - 2px);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  border-radius: 1px;\n}\n.flag.top-down::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */"]}, media: undefined });
+    inject("data-v-4fab5204_0", { source: ".flag[data-v-4fab5204] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s[data-v-4fab5204] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-4fab5204] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-4fab5204] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-4fab5204] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-4fab5204] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-4fab5204] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-4fab5204] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-4fab5204] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-4fab5204] {\n  border-radius: 2px;\n}\n.flag.border[data-v-4fab5204]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  width: calc(100% - 2px);\n  height: calc(100% - 2px);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius[data-v-4fab5204]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down[data-v-4fab5204]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear[data-v-4fab5204]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular[data-v-4fab5204]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img[data-v-4fab5204] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */", map: {"version":3,"sources":["/Users/donovanroubos/Code/Yummygum/vue-flagpack/src/Flag.vue","Flag.vue"],"names":[],"mappings":"AA0EA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;EACA,sBAAA;ACzEA;AD4EA;EACA,WAAA;EACA,YAAA;AC1EA;AD4EA;EACA,4CAAA;AC1EA;AD6EA;EACA,kBAAA;AC3EA;AD+EA;EACA,WAAA;EACA,YAAA;AC7EA;AD+EA;EACA,0CAAA;AC7EA;ADgFA;EACA,oBAAA;AC9EA;ADkFA;EACA,WAAA;EACA,YAAA;AChFA;ADkFA;EACA,0CAAA;AChFA;ADmFA;EACA,kBAAA;ACjFA;ADuFA;EAzDA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAqDA,uBAAA;EACA,wBAAA;EACA,oCAAA;EACA,uBAAA;AC/EA;ADoFA;EAnEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EA+DA,kBAAA;AC5EA;ADiFA;EA1EA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAsEA,6FAAA;ACzEA;AD8EA;EAjFA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EA6EA,kQAAA;ACtEA;AD2EA;EAxFA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAoFA,ygBAAA;ACnEA;ADwEA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;ACtEA;;AAEA,mCAAmC","file":"Flag.vue","sourcesContent":["<template>\n  <div\n    :style=\"[styles]\"\n    :class=\"[\n      'flag',\n      `size-${size}`,\n      {'border-radius': hasBorderRadius },\n      {'border': hasBorder },\n      {'drop-shadow': hasDropShadow},\n      gradient,\n      className\n    ]\">\n    <img :src=\"imageUrl\">\n  </div>\n</template>\n\n<script>\nimport { isoToCountryCode, imageUrl } from 'flagpack-core'\n\nexport default {\n  name: 'Flag',\n  computed: {\n    imageUrl() {\n      return imageUrl(isoToCountryCode(this.code).toUpperCase(), this.size.toLowerCase())\n    }\n  },\n  props: {\n    size: {\n      type: String,\n      default: 'm',\n      validator: value => (\n        ['s', 'm', 'l'].indexOf(value) !== -1\n      ),\n    },\n    code: {\n      type: String,\n      default: '528'\n    },\n    hasDropShadow: {\n      type: Boolean,\n      default: false,\n    },\n    hasBorder: {\n      type: Boolean,\n      default: true\n    },\n    hasBorderRadius: {\n      type: Boolean,\n      default: true,\n    },\n    gradient: {\n      type: String,\n      validator: value => (\n        ['top-down', 'real-linear', 'real-circular'].indexOf(value) !== -1\n      ),\n    },\n    className: {\n      type: String\n    }\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n@mixin before-styling {\n  content: '';\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n}\n\n.flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n\n  &.size {\n    &-s {\n      width: 16px;\n      height: 12px;\n\n      &.drop-shadow {\n        box-shadow: 0 0 1px 0.5px rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1px;\n      }\n    }\n\n    &-m {\n      width: 20px;\n      height: 15px;\n\n      &.drop-shadow {\n        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1.5px;\n      }\n    }\n\n    &-l {\n      width: 32px;\n      height: 24px;\n\n      &.drop-shadow {\n        box-shadow: 0 2px 3px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 2px;\n      }\n    }\n  }\n\n  &.border {\n    &::before {\n      @include before-styling();\n      width: calc(100% - 2px);\n      height: calc(100% - 2px);\n      border: 1px solid rgba(0, 0, 0, .5);\n      mix-blend-mode: overlay;\n    }\n  }\n\n  &.border-radius {\n    &::before {\n      @include before-styling();\n      border-radius: 1px;\n    }\n  }\n\n  &.top-down {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(0deg, rgba(0,0,0,0.30) 2%, rgba(255,255,255,0.70) 100%);\n    }\n  }\n\n  &.real-linear {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(45deg, rgba(0,0,0,0.20) 0%, rgba(39,39,39,0.22) 11%, rgba(255,255,255,0.30) 27%, rgba(0,0,0,0.24) 41%, rgba(0,0,0,0.55) 52%, rgba(255,255,255,0.26) 63%, rgba(0,0,0,0.27) 74%, rgba(255,255,255,0.30) 100%);\n    }\n  }\n\n  &.real-circular {\n    &::before {\n      @include before-styling();\n      background: radial-gradient(50% 36%, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.24) 11%, rgba(0,0,0,0.55) 17%, rgba(255,255,255,0.26) 22%, rgba(0,0,0,0.17) 27%, rgba(255,255,255,0.28) 31%, rgba(255,255,255,0.00) 37%) center calc(50% - 8px) / 600% 600%,\n                  radial-gradient(50% 123%, rgba(255,255,255,0.30) 25%, rgba(0,0,0,0.24) 48%, rgba(0,0,0,0.55) 61%, rgba(255,255,255,0.26) 72%, rgba(0,0,0,0.17) 80%, rgba(255,255,255,0.28) 88%, rgba(255,255,255,0.30) 100%) center calc(50% - 8px) / 600% 600%;\n    }\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n</style>\n",".flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius {\n  border-radius: 1px;\n}\n.flag.size-m {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius {\n  border-radius: 1.5px;\n}\n.flag.size-l {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius {\n  border-radius: 2px;\n}\n.flag.border::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  width: calc(100% - 2px);\n  height: calc(100% - 2px);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-5af92868";
+  const __vue_scope_id__ = "data-v-4fab5204";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
diff --git a/dist/vue-flag-rollup.esm.js b/dist/vue-flag-rollup.esm.js
index 817c8c7..2fdb6e0 100644
--- a/dist/vue-flag-rollup.esm.js
+++ b/dist/vue-flag-rollup.esm.js
@@ -7,9 +7,6 @@ var script = {
   computed: {
     imageUrl() {
       return imageUrl(isoToCountryCode(this.code).toUpperCase(), this.size.toLowerCase())
-    },
-    styles() {
-      return this.customBorderRadius && {'border-radius': `${this.customBorderRadius}px`}
     }
   },
   props: {
@@ -30,15 +27,12 @@ var script = {
     },
     hasBorder: {
       type: Boolean,
-      default: false
+      default: true
     },
     hasBorderRadius: {
       type: Boolean,
       default: true,
     },
-    customBorderRadius: {
-      type: String,
-    },
     gradient: {
       type: String,
       validator: value => (
@@ -210,11 +204,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-5af92868_0", { source: ".flag[data-v-5af92868] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n}\n.flag.size-s[data-v-5af92868] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-5af92868] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-5af92868] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-5af92868] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-5af92868] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-5af92868] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-5af92868] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-5af92868] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-5af92868] {\n  border-radius: 2px;\n}\n.flag.border[data-v-5af92868]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  width: calc(100% - 2px);\n  height: calc(100% - 2px);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius[data-v-5af92868]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  border-radius: 1px;\n}\n.flag.top-down[data-v-5af92868]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear[data-v-5af92868]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular[data-v-5af92868]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img[data-v-5af92868] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */", map: {"version":3,"sources":["/Users/donovanroubos/Code/Yummygum/vue-flag-pack/src/Flag.vue","Flag.vue"],"names":[],"mappings":"AA+EA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;AC9EA;ADiFA;EACA,WAAA;EACA,YAAA;AC/EA;ADiFA;EACA,4CAAA;AC/EA;ADkFA;EACA,kBAAA;AChFA;ADoFA;EACA,WAAA;EACA,YAAA;AClFA;ADoFA;EACA,0CAAA;AClFA;ADqFA;EACA,oBAAA;ACnFA;ADuFA;EACA,WAAA;EACA,YAAA;ACrFA;ADuFA;EACA,0CAAA;ACrFA;ADwFA;EACA,kBAAA;ACtFA;AD4FA;EAvDA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EAoDA,uBAAA;EACA,wBAAA;EACA,oCAAA;EACA,uBAAA;ACrFA;AD0FA;EAjEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EA8DA,kBAAA;ACnFA;ADwFA;EAxEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EAqEA,6FAAA;ACjFA;ADsFA;EA/EA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EA4EA,kQAAA;AC/EA;ADoFA;EAtFA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EAmFA,ygBAAA;AC7EA;ADkFA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;AChFA;;AAEA,mCAAmC","file":"Flag.vue","sourcesContent":["<template>\n  <div\n    :style=\"[styles]\"\n    :class=\"[\n      'flag',\n      `size-${size}`,\n      {'border-radius': hasBorderRadius },\n      {'border': hasBorder },\n      {'drop-shadow': hasDropShadow},\n      gradient,\n      className\n    ]\">\n    <img :src=\"imageUrl\">\n  </div>\n</template>\n\n<script>\nimport { isoToCountryCode, imageUrl } from 'flagpack-core'\n\nexport default {\n  name: 'Flag',\n  computed: {\n    imageUrl() {\n      return imageUrl(isoToCountryCode(this.code).toUpperCase(), this.size.toLowerCase())\n    },\n    styles() {\n      return this.customBorderRadius && {'border-radius': `${this.customBorderRadius}px`}\n    }\n  },\n  props: {\n    size: {\n      type: String,\n      default: 'm',\n      validator: value => (\n        ['s', 'm', 'l'].indexOf(value) !== -1\n      ),\n    },\n    code: {\n      type: String,\n      default: '528'\n    },\n    hasDropShadow: {\n      type: Boolean,\n      default: false,\n    },\n    hasBorder: {\n      type: Boolean,\n      default: false\n    },\n    hasBorderRadius: {\n      type: Boolean,\n      default: true,\n    },\n    customBorderRadius: {\n      type: String,\n    },\n    gradient: {\n      type: String,\n      validator: value => (\n        ['top-down', 'real-linear', 'real-circular'].indexOf(value) !== -1\n      ),\n    },\n    className: {\n      type: String\n    }\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n@mixin before-styling {\n  content: '';\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n}\n\n.flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n\n  &.size {\n    &-s {\n      width: 16px;\n      height: 12px;\n\n      &.drop-shadow {\n        box-shadow: 0 0 1px 0.5px rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1px;\n      }\n    }\n\n    &-m {\n      width: 20px;\n      height: 15px;\n\n      &.drop-shadow {\n        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1.5px;\n      }\n    }\n\n    &-l {\n      width: 32px;\n      height: 24px;\n\n      &.drop-shadow {\n        box-shadow: 0 2px 3px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 2px;\n      }\n    }\n  }\n\n  &.border {\n    &::before {\n      @include before-styling();\n      width: calc(100% - 2px);\n      height: calc(100% - 2px);\n      border: 1px solid rgba(0, 0, 0, .5);\n      mix-blend-mode: overlay;\n    }\n  }\n\n  &.border-radius {\n    &::before {\n      @include before-styling();\n      border-radius: 1px;\n    }\n  }\n\n  &.top-down {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(0deg, rgba(0,0,0,0.30) 2%, rgba(255,255,255,0.70) 100%);\n    }\n  }\n\n  &.real-linear {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(45deg, rgba(0,0,0,0.20) 0%, rgba(39,39,39,0.22) 11%, rgba(255,255,255,0.30) 27%, rgba(0,0,0,0.24) 41%, rgba(0,0,0,0.55) 52%, rgba(255,255,255,0.26) 63%, rgba(0,0,0,0.27) 74%, rgba(255,255,255,0.30) 100%);\n    }\n  }\n\n  &.real-circular {\n    &::before {\n      @include before-styling();\n      background: radial-gradient(50% 36%, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.24) 11%, rgba(0,0,0,0.55) 17%, rgba(255,255,255,0.26) 22%, rgba(0,0,0,0.17) 27%, rgba(255,255,255,0.28) 31%, rgba(255,255,255,0.00) 37%) center calc(50% - 8px) / 600% 600%,\n                  radial-gradient(50% 123%, rgba(255,255,255,0.30) 25%, rgba(0,0,0,0.24) 48%, rgba(0,0,0,0.55) 61%, rgba(255,255,255,0.26) 72%, rgba(0,0,0,0.17) 80%, rgba(255,255,255,0.28) 88%, rgba(255,255,255,0.30) 100%) center calc(50% - 8px) / 600% 600%;\n    }\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n</style>\n",".flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n}\n.flag.size-s {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius {\n  border-radius: 1px;\n}\n.flag.size-m {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius {\n  border-radius: 1.5px;\n}\n.flag.size-l {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius {\n  border-radius: 2px;\n}\n.flag.border::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  width: calc(100% - 2px);\n  height: calc(100% - 2px);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  border-radius: 1px;\n}\n.flag.top-down::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */"]}, media: undefined });
+    inject("data-v-4fab5204_0", { source: ".flag[data-v-4fab5204] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s[data-v-4fab5204] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-4fab5204] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-4fab5204] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-4fab5204] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-4fab5204] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-4fab5204] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-4fab5204] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-4fab5204] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-4fab5204] {\n  border-radius: 2px;\n}\n.flag.border[data-v-4fab5204]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  width: calc(100% - 2px);\n  height: calc(100% - 2px);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius[data-v-4fab5204]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down[data-v-4fab5204]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear[data-v-4fab5204]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular[data-v-4fab5204]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img[data-v-4fab5204] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */", map: {"version":3,"sources":["/Users/donovanroubos/Code/Yummygum/vue-flagpack/src/Flag.vue","Flag.vue"],"names":[],"mappings":"AA0EA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;EACA,sBAAA;ACzEA;AD4EA;EACA,WAAA;EACA,YAAA;AC1EA;AD4EA;EACA,4CAAA;AC1EA;AD6EA;EACA,kBAAA;AC3EA;AD+EA;EACA,WAAA;EACA,YAAA;AC7EA;AD+EA;EACA,0CAAA;AC7EA;ADgFA;EACA,oBAAA;AC9EA;ADkFA;EACA,WAAA;EACA,YAAA;AChFA;ADkFA;EACA,0CAAA;AChFA;ADmFA;EACA,kBAAA;ACjFA;ADuFA;EAzDA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAqDA,uBAAA;EACA,wBAAA;EACA,oCAAA;EACA,uBAAA;AC/EA;ADoFA;EAnEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EA+DA,kBAAA;AC5EA;ADiFA;EA1EA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAsEA,6FAAA;ACzEA;AD8EA;EAjFA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EA6EA,kQAAA;ACtEA;AD2EA;EAxFA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAoFA,ygBAAA;ACnEA;ADwEA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;ACtEA;;AAEA,mCAAmC","file":"Flag.vue","sourcesContent":["<template>\n  <div\n    :style=\"[styles]\"\n    :class=\"[\n      'flag',\n      `size-${size}`,\n      {'border-radius': hasBorderRadius },\n      {'border': hasBorder },\n      {'drop-shadow': hasDropShadow},\n      gradient,\n      className\n    ]\">\n    <img :src=\"imageUrl\">\n  </div>\n</template>\n\n<script>\nimport { isoToCountryCode, imageUrl } from 'flagpack-core'\n\nexport default {\n  name: 'Flag',\n  computed: {\n    imageUrl() {\n      return imageUrl(isoToCountryCode(this.code).toUpperCase(), this.size.toLowerCase())\n    }\n  },\n  props: {\n    size: {\n      type: String,\n      default: 'm',\n      validator: value => (\n        ['s', 'm', 'l'].indexOf(value) !== -1\n      ),\n    },\n    code: {\n      type: String,\n      default: '528'\n    },\n    hasDropShadow: {\n      type: Boolean,\n      default: false,\n    },\n    hasBorder: {\n      type: Boolean,\n      default: true\n    },\n    hasBorderRadius: {\n      type: Boolean,\n      default: true,\n    },\n    gradient: {\n      type: String,\n      validator: value => (\n        ['top-down', 'real-linear', 'real-circular'].indexOf(value) !== -1\n      ),\n    },\n    className: {\n      type: String\n    }\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n@mixin before-styling {\n  content: '';\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n}\n\n.flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n\n  &.size {\n    &-s {\n      width: 16px;\n      height: 12px;\n\n      &.drop-shadow {\n        box-shadow: 0 0 1px 0.5px rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1px;\n      }\n    }\n\n    &-m {\n      width: 20px;\n      height: 15px;\n\n      &.drop-shadow {\n        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1.5px;\n      }\n    }\n\n    &-l {\n      width: 32px;\n      height: 24px;\n\n      &.drop-shadow {\n        box-shadow: 0 2px 3px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 2px;\n      }\n    }\n  }\n\n  &.border {\n    &::before {\n      @include before-styling();\n      width: calc(100% - 2px);\n      height: calc(100% - 2px);\n      border: 1px solid rgba(0, 0, 0, .5);\n      mix-blend-mode: overlay;\n    }\n  }\n\n  &.border-radius {\n    &::before {\n      @include before-styling();\n      border-radius: 1px;\n    }\n  }\n\n  &.top-down {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(0deg, rgba(0,0,0,0.30) 2%, rgba(255,255,255,0.70) 100%);\n    }\n  }\n\n  &.real-linear {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(45deg, rgba(0,0,0,0.20) 0%, rgba(39,39,39,0.22) 11%, rgba(255,255,255,0.30) 27%, rgba(0,0,0,0.24) 41%, rgba(0,0,0,0.55) 52%, rgba(255,255,255,0.26) 63%, rgba(0,0,0,0.27) 74%, rgba(255,255,255,0.30) 100%);\n    }\n  }\n\n  &.real-circular {\n    &::before {\n      @include before-styling();\n      background: radial-gradient(50% 36%, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.24) 11%, rgba(0,0,0,0.55) 17%, rgba(255,255,255,0.26) 22%, rgba(0,0,0,0.17) 27%, rgba(255,255,255,0.28) 31%, rgba(255,255,255,0.00) 37%) center calc(50% - 8px) / 600% 600%,\n                  radial-gradient(50% 123%, rgba(255,255,255,0.30) 25%, rgba(0,0,0,0.24) 48%, rgba(0,0,0,0.55) 61%, rgba(255,255,255,0.26) 72%, rgba(0,0,0,0.17) 80%, rgba(255,255,255,0.28) 88%, rgba(255,255,255,0.30) 100%) center calc(50% - 8px) / 600% 600%;\n    }\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n</style>\n",".flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius {\n  border-radius: 1px;\n}\n.flag.size-m {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius {\n  border-radius: 1.5px;\n}\n.flag.size-l {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius {\n  border-radius: 2px;\n}\n.flag.border::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  width: calc(100% - 2px);\n  height: calc(100% - 2px);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-5af92868";
+  const __vue_scope_id__ = "data-v-4fab5204";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
diff --git a/dist/vue-flag-rollup.iife.js b/dist/vue-flag-rollup.iife.js
index c829f54..367120d 100644
--- a/dist/vue-flag-rollup.iife.js
+++ b/dist/vue-flag-rollup.iife.js
@@ -8,9 +8,6 @@ var Flag = (function (exports, flagpackCore) {
     computed: {
       imageUrl() {
         return flagpackCore.imageUrl(flagpackCore.isoToCountryCode(this.code).toUpperCase(), this.size.toLowerCase())
-      },
-      styles() {
-        return this.customBorderRadius && {'border-radius': `${this.customBorderRadius}px`}
       }
     },
     props: {
@@ -31,15 +28,12 @@ var Flag = (function (exports, flagpackCore) {
       },
       hasBorder: {
         type: Boolean,
-        default: false
+        default: true
       },
       hasBorderRadius: {
         type: Boolean,
         default: true,
       },
-      customBorderRadius: {
-        type: String,
-      },
       gradient: {
         type: String,
         validator: value => (
@@ -211,11 +205,11 @@ var Flag = (function (exports, flagpackCore) {
     /* style */
     const __vue_inject_styles__ = function (inject) {
       if (!inject) return
-      inject("data-v-5af92868_0", { source: ".flag[data-v-5af92868] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n}\n.flag.size-s[data-v-5af92868] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-5af92868] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-5af92868] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-5af92868] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-5af92868] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-5af92868] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-5af92868] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-5af92868] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-5af92868] {\n  border-radius: 2px;\n}\n.flag.border[data-v-5af92868]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  width: calc(100% - 2px);\n  height: calc(100% - 2px);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius[data-v-5af92868]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  border-radius: 1px;\n}\n.flag.top-down[data-v-5af92868]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear[data-v-5af92868]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular[data-v-5af92868]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img[data-v-5af92868] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */", map: {"version":3,"sources":["/Users/donovanroubos/Code/Yummygum/vue-flag-pack/src/Flag.vue","Flag.vue"],"names":[],"mappings":"AA+EA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;AC9EA;ADiFA;EACA,WAAA;EACA,YAAA;AC/EA;ADiFA;EACA,4CAAA;AC/EA;ADkFA;EACA,kBAAA;AChFA;ADoFA;EACA,WAAA;EACA,YAAA;AClFA;ADoFA;EACA,0CAAA;AClFA;ADqFA;EACA,oBAAA;ACnFA;ADuFA;EACA,WAAA;EACA,YAAA;ACrFA;ADuFA;EACA,0CAAA;ACrFA;ADwFA;EACA,kBAAA;ACtFA;AD4FA;EAvDA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EAoDA,uBAAA;EACA,wBAAA;EACA,oCAAA;EACA,uBAAA;ACrFA;AD0FA;EAjEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EA8DA,kBAAA;ACnFA;ADwFA;EAxEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EAqEA,6FAAA;ACjFA;ADsFA;EA/EA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EA4EA,kQAAA;AC/EA;ADoFA;EAtFA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EAmFA,ygBAAA;AC7EA;ADkFA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;AChFA;;AAEA,mCAAmC","file":"Flag.vue","sourcesContent":["<template>\n  <div\n    :style=\"[styles]\"\n    :class=\"[\n      'flag',\n      `size-${size}`,\n      {'border-radius': hasBorderRadius },\n      {'border': hasBorder },\n      {'drop-shadow': hasDropShadow},\n      gradient,\n      className\n    ]\">\n    <img :src=\"imageUrl\">\n  </div>\n</template>\n\n<script>\nimport { isoToCountryCode, imageUrl } from 'flagpack-core'\n\nexport default {\n  name: 'Flag',\n  computed: {\n    imageUrl() {\n      return imageUrl(isoToCountryCode(this.code).toUpperCase(), this.size.toLowerCase())\n    },\n    styles() {\n      return this.customBorderRadius && {'border-radius': `${this.customBorderRadius}px`}\n    }\n  },\n  props: {\n    size: {\n      type: String,\n      default: 'm',\n      validator: value => (\n        ['s', 'm', 'l'].indexOf(value) !== -1\n      ),\n    },\n    code: {\n      type: String,\n      default: '528'\n    },\n    hasDropShadow: {\n      type: Boolean,\n      default: false,\n    },\n    hasBorder: {\n      type: Boolean,\n      default: false\n    },\n    hasBorderRadius: {\n      type: Boolean,\n      default: true,\n    },\n    customBorderRadius: {\n      type: String,\n    },\n    gradient: {\n      type: String,\n      validator: value => (\n        ['top-down', 'real-linear', 'real-circular'].indexOf(value) !== -1\n      ),\n    },\n    className: {\n      type: String\n    }\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n@mixin before-styling {\n  content: '';\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n}\n\n.flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n\n  &.size {\n    &-s {\n      width: 16px;\n      height: 12px;\n\n      &.drop-shadow {\n        box-shadow: 0 0 1px 0.5px rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1px;\n      }\n    }\n\n    &-m {\n      width: 20px;\n      height: 15px;\n\n      &.drop-shadow {\n        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1.5px;\n      }\n    }\n\n    &-l {\n      width: 32px;\n      height: 24px;\n\n      &.drop-shadow {\n        box-shadow: 0 2px 3px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 2px;\n      }\n    }\n  }\n\n  &.border {\n    &::before {\n      @include before-styling();\n      width: calc(100% - 2px);\n      height: calc(100% - 2px);\n      border: 1px solid rgba(0, 0, 0, .5);\n      mix-blend-mode: overlay;\n    }\n  }\n\n  &.border-radius {\n    &::before {\n      @include before-styling();\n      border-radius: 1px;\n    }\n  }\n\n  &.top-down {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(0deg, rgba(0,0,0,0.30) 2%, rgba(255,255,255,0.70) 100%);\n    }\n  }\n\n  &.real-linear {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(45deg, rgba(0,0,0,0.20) 0%, rgba(39,39,39,0.22) 11%, rgba(255,255,255,0.30) 27%, rgba(0,0,0,0.24) 41%, rgba(0,0,0,0.55) 52%, rgba(255,255,255,0.26) 63%, rgba(0,0,0,0.27) 74%, rgba(255,255,255,0.30) 100%);\n    }\n  }\n\n  &.real-circular {\n    &::before {\n      @include before-styling();\n      background: radial-gradient(50% 36%, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.24) 11%, rgba(0,0,0,0.55) 17%, rgba(255,255,255,0.26) 22%, rgba(0,0,0,0.17) 27%, rgba(255,255,255,0.28) 31%, rgba(255,255,255,0.00) 37%) center calc(50% - 8px) / 600% 600%,\n                  radial-gradient(50% 123%, rgba(255,255,255,0.30) 25%, rgba(0,0,0,0.24) 48%, rgba(0,0,0,0.55) 61%, rgba(255,255,255,0.26) 72%, rgba(0,0,0,0.17) 80%, rgba(255,255,255,0.28) 88%, rgba(255,255,255,0.30) 100%) center calc(50% - 8px) / 600% 600%;\n    }\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n</style>\n",".flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n}\n.flag.size-s {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius {\n  border-radius: 1px;\n}\n.flag.size-m {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius {\n  border-radius: 1.5px;\n}\n.flag.size-l {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius {\n  border-radius: 2px;\n}\n.flag.border::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  width: calc(100% - 2px);\n  height: calc(100% - 2px);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  border-radius: 1px;\n}\n.flag.top-down::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */"]}, media: undefined });
+      inject("data-v-4fab5204_0", { source: ".flag[data-v-4fab5204] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s[data-v-4fab5204] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-4fab5204] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-4fab5204] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-4fab5204] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-4fab5204] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-4fab5204] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-4fab5204] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-4fab5204] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-4fab5204] {\n  border-radius: 2px;\n}\n.flag.border[data-v-4fab5204]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  width: calc(100% - 2px);\n  height: calc(100% - 2px);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius[data-v-4fab5204]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down[data-v-4fab5204]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear[data-v-4fab5204]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular[data-v-4fab5204]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img[data-v-4fab5204] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */", map: {"version":3,"sources":["/Users/donovanroubos/Code/Yummygum/vue-flagpack/src/Flag.vue","Flag.vue"],"names":[],"mappings":"AA0EA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;EACA,sBAAA;ACzEA;AD4EA;EACA,WAAA;EACA,YAAA;AC1EA;AD4EA;EACA,4CAAA;AC1EA;AD6EA;EACA,kBAAA;AC3EA;AD+EA;EACA,WAAA;EACA,YAAA;AC7EA;AD+EA;EACA,0CAAA;AC7EA;ADgFA;EACA,oBAAA;AC9EA;ADkFA;EACA,WAAA;EACA,YAAA;AChFA;ADkFA;EACA,0CAAA;AChFA;ADmFA;EACA,kBAAA;ACjFA;ADuFA;EAzDA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAqDA,uBAAA;EACA,wBAAA;EACA,oCAAA;EACA,uBAAA;AC/EA;ADoFA;EAnEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EA+DA,kBAAA;AC5EA;ADiFA;EA1EA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAsEA,6FAAA;ACzEA;AD8EA;EAjFA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EA6EA,kQAAA;ACtEA;AD2EA;EAxFA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAoFA,ygBAAA;ACnEA;ADwEA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;ACtEA;;AAEA,mCAAmC","file":"Flag.vue","sourcesContent":["<template>\n  <div\n    :style=\"[styles]\"\n    :class=\"[\n      'flag',\n      `size-${size}`,\n      {'border-radius': hasBorderRadius },\n      {'border': hasBorder },\n      {'drop-shadow': hasDropShadow},\n      gradient,\n      className\n    ]\">\n    <img :src=\"imageUrl\">\n  </div>\n</template>\n\n<script>\nimport { isoToCountryCode, imageUrl } from 'flagpack-core'\n\nexport default {\n  name: 'Flag',\n  computed: {\n    imageUrl() {\n      return imageUrl(isoToCountryCode(this.code).toUpperCase(), this.size.toLowerCase())\n    }\n  },\n  props: {\n    size: {\n      type: String,\n      default: 'm',\n      validator: value => (\n        ['s', 'm', 'l'].indexOf(value) !== -1\n      ),\n    },\n    code: {\n      type: String,\n      default: '528'\n    },\n    hasDropShadow: {\n      type: Boolean,\n      default: false,\n    },\n    hasBorder: {\n      type: Boolean,\n      default: true\n    },\n    hasBorderRadius: {\n      type: Boolean,\n      default: true,\n    },\n    gradient: {\n      type: String,\n      validator: value => (\n        ['top-down', 'real-linear', 'real-circular'].indexOf(value) !== -1\n      ),\n    },\n    className: {\n      type: String\n    }\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n@mixin before-styling {\n  content: '';\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n}\n\n.flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n\n  &.size {\n    &-s {\n      width: 16px;\n      height: 12px;\n\n      &.drop-shadow {\n        box-shadow: 0 0 1px 0.5px rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1px;\n      }\n    }\n\n    &-m {\n      width: 20px;\n      height: 15px;\n\n      &.drop-shadow {\n        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1.5px;\n      }\n    }\n\n    &-l {\n      width: 32px;\n      height: 24px;\n\n      &.drop-shadow {\n        box-shadow: 0 2px 3px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 2px;\n      }\n    }\n  }\n\n  &.border {\n    &::before {\n      @include before-styling();\n      width: calc(100% - 2px);\n      height: calc(100% - 2px);\n      border: 1px solid rgba(0, 0, 0, .5);\n      mix-blend-mode: overlay;\n    }\n  }\n\n  &.border-radius {\n    &::before {\n      @include before-styling();\n      border-radius: 1px;\n    }\n  }\n\n  &.top-down {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(0deg, rgba(0,0,0,0.30) 2%, rgba(255,255,255,0.70) 100%);\n    }\n  }\n\n  &.real-linear {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(45deg, rgba(0,0,0,0.20) 0%, rgba(39,39,39,0.22) 11%, rgba(255,255,255,0.30) 27%, rgba(0,0,0,0.24) 41%, rgba(0,0,0,0.55) 52%, rgba(255,255,255,0.26) 63%, rgba(0,0,0,0.27) 74%, rgba(255,255,255,0.30) 100%);\n    }\n  }\n\n  &.real-circular {\n    &::before {\n      @include before-styling();\n      background: radial-gradient(50% 36%, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.24) 11%, rgba(0,0,0,0.55) 17%, rgba(255,255,255,0.26) 22%, rgba(0,0,0,0.17) 27%, rgba(255,255,255,0.28) 31%, rgba(255,255,255,0.00) 37%) center calc(50% - 8px) / 600% 600%,\n                  radial-gradient(50% 123%, rgba(255,255,255,0.30) 25%, rgba(0,0,0,0.24) 48%, rgba(0,0,0,0.55) 61%, rgba(255,255,255,0.26) 72%, rgba(0,0,0,0.17) 80%, rgba(255,255,255,0.28) 88%, rgba(255,255,255,0.30) 100%) center calc(50% - 8px) / 600% 600%;\n    }\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n</style>\n",".flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius {\n  border-radius: 1px;\n}\n.flag.size-m {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius {\n  border-radius: 1.5px;\n}\n.flag.size-l {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius {\n  border-radius: 2px;\n}\n.flag.border::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  width: calc(100% - 2px);\n  height: calc(100% - 2px);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__ = "data-v-5af92868";
+    const __vue_scope_id__ = "data-v-4fab5204";
     /* module identifier */
     const __vue_module_identifier__ = undefined;
     /* functional template */