@charset "utf-8";
@import "../../style/color.css";

:host {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;

  --size: 48px;

  width: var(--size);
  height: var(--size);
  background-color: var(--fill-static);
  color: var(--fill-stroke);

  font-family: CustomSansSerif, 'Lucida Grande', Arial, sans-serif;
  font-size: calc(var(--size) / 2);
  font-weight: 100;
  line-height: var(--size);
  text-align: center;

  position: relative;
}

material-icon {
  position: absolute;
  width: 70%;
  height: 70%;
  left: 15%;
  top: 14%;
  display: none;
}

:host > img:not([src]) ~ material-icon:not(:empty) {
  display: block;
}

material-icon:not(:empty) + material-text {
  display: none;
}

:host > img {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

:host > img[src$=".svg"] ~ material-text,
:host > img[src$=".svg"] ~ material-icon {
  display: none;
}

slot {
  display: none;
}