:host {
  --fiv-padding-end: 0;
  --fiv-padding-start: 0;

  --fiv-position-top: -2px;
  --fiv-position-right: -6px;

  --fiv-icon-height: 28px;
  --fiv-icon-width: 28px;

  --fiv-small-icon-height: 18px;
  --fiv-small-icon-width: 18px;
  --fiv-small-icon-font-size: 0.8em;

  --fiv-badge-height: 18px;
  --fiv-badge-width: 18px;
  --fiv-badge-font-size: 0.6em;

  --fiv-dot-height: 18px;
  --fiv-dot-width: 18px;

  position: relative;
  display: inline-block;
}

.icon {
  margin: 0;
  font-size: 1.8em;
  color: var(--fiv-icon-color, var(--ion-color-dark));
  padding-right: var(--fiv-padding-end);
  padding-left: var(--fiv-padding-start);
  height: var(--fiv-icon-height);
  width: var(--fiv-icon-width);
}

.indicator-badge {
  position: absolute;
  top: var(--fiv-position-top);
  right: var(--fiv-position-right);

  height: var(--fiv-badge-height);
  width: var(--fiv-badge-width);

  background-color: var(--fiv-badge-background-color, var(--ion-color-primary));
  color: var(--fiv-badge-color, var(--ion-color-light));

  border-radius: 14px;
  z-index: 13;

  * {
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    left: 50%;
    top: 50%;
    font-size: var(--fiv-badge-font-size);
  }
}

.indicator-dot {
  position: absolute;
  top: var(--fiv-position-top);
  right: var(--fiv-position-right);

  height: var(--fiv-dot-height);
  width: var(--fiv-dot-width);

  background-color: var(--fiv-dot-background-color, var(--ion-color-primary));

  border-radius: 100%;
  z-index: 11;
}

.indicator-small-icon {
  position: absolute;
  top: var(--fiv-position-top);
  right: var(--fiv-position-right);

  height: var(--fiv-small-icon-height);
  width: var(--fiv-small-icon-width);

  background-color: var(
    --fiv-small-icon-background-color,
    var(--ion-color-primary)
  );
  color: var(--fiv-small-icon-color, var(--ion-color-light));

  border-radius: 14px;
  z-index: 13;

  * {
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    left: 50%;
    top: 50%;
    font-size: var(--fiv-small-icon-font-size);
  }
}

.off {
  width: 120%;
  height: 2px;
  background: var(
    --fiv-off-color,
    var(--fiv-icon-color, var(--ion-color-dark))
  );
  position: absolute;
  left: 0;
  transform: rotateZ(45deg) translateY(10px) translateX(6px);
}

.off-background {
  width: 120%;
  height: 2px;
  background: #000;
  position: absolute;
  background-color: var(--fiv-off-background-color, var(--ion-color-light));
  left: 2px;
  transform: rotateZ(45deg) translateY(10px) translateX(6px);
}
