:host {
  /**
   * @prop --background-opacity: Opacity of background color
   * @prop --background: Background of the badge
   * @prop --color: Text color of the badge
   */
  --background: rgba(var(--bkkr-text-color-rgb, 0, 0, 0), var(--background-opacity, 0.04));
  --color: var(--bkkr-text-color, #000);
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  background: var(--background);
  color: var(--color);
  overflow: hidden;
}

:host(.bkkr-color) {
  --background: var(--color-base, var(--color-primary, #3880ff));
  --color: var(--color-contrast, var(--color-primary-contrast, #fff));
}

:host(.shape-square) {
  /**
   * @prop --border-radius: Border radius of shape
   */
  --border-radius: 18%;
  border-radius: var(--border-radius);
}

:host(.shape-circle) {
  clip-path: circle(50% at 50% 50%);
}

:host(.shape-triangle) {
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}

:host(.shape-octagon) {
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

:host(.shape-rombus) {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

:host(.shape-parallel) {
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

::slotted(bkkr-img),
::slotted(img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}