.root {
  position: relative;
}

.rootMed {
  width: 20px;
  height: 18px;
}

.rootLarge {
  width: 24px;
  height: 20px;
}

.defaultStroke > svg {
  stroke-width: 1;
}

.defaultBell > svg {
  fill: var(--palette-text-000);
  color: var(--palette-text-500);
}

.filledBell svg {
  fill: var(--palette-text-500);
  color: var(--palette-text-500);
}

.trayBell svg {
  fill: none;
  color: white;
}

.counter {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);

  display: flex;
  justify-content: center;
  align-items: center;
}

.counterBlue {
  background-color: var(--palette-primary-500);
  color: var(--palette-text-000);
}

.counterWhite {
  background-color: var(--palette-text-000);
  color: var(--palette-text-500);
}

.counterMed {
  position: absolute;
  top: -2px;
  left: 11px;

  font-size: 8px;

  min-width: 8px;

  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 2px;
  padding-right: 2px;
  border-radius: 12px;
}

.counterLarge {
  position: absolute;
  top: -2px;
  left: 14px;

  font-size: 10px;

  min-width: 8px;

  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: var(--spacing-1);
  padding-right: var(--spacing-1);
  border-radius: 12px;
}
