.di {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 236px;
  border-radius: var(--radius-4);
  background: transparent;
  color: var(--color-gray-900);
  font-family: var(--font-family-base);
  cursor: pointer;
}
.di--s { padding: var(--spacing-8); }
.di--m { padding: var(--spacing-8) var(--spacing-12); }

.di__content {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  gap: var(--spacing-8);
  overflow: hidden;
}

.di__label {
  flex: 1 0 0;
  min-width: 0;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.di__icon {
  flex-shrink: 0;
  display: block;
  color: var(--color-gray-400);
}
.di__icon svg { display: block; width: 100%; height: 100%; }
.di--s .di__icon { width: 16px; height: 16px; }
.di--m .di__icon { width: 20px; height: 20px; }

.di__avatar {
  flex-shrink: 0;
  display: block;
  border-radius: 200px;
  object-fit: cover;
}
.di--s .di__avatar { width: 16px; height: 16px; }
.di--m .di__avatar { width: 20px; height: 20px; }

.di__box {
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-4);
  border: 1px solid var(--color-gray-200);
  background: var(--color-gray-0);
  color: var(--color-gray-0);
}
.di--s .di__box { width: 16px; height: 16px; }
.di--m .di__box { width: 20px; height: 20px; }
.di__box svg { display: none; width: 100%; height: 100%; }
.di__box--checked {
  background: var(--color-accent-400);
  border-color: var(--color-accent-400);
}
.di__box--checked svg { display: block; }

.di__check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: block;
  color: var(--color-accent-400);
}
.di__check svg { display: block; width: 100%; height: 100%; }

.di__counter {
  flex-shrink: 0;
  color: var(--color-gray-300);
  white-space: nowrap;
}

.di__spinner { flex-shrink: 0; }
.di--s .di__spinner { width: 16px; height: 16px; }
.di--m .di__spinner { width: 20px; height: 20px; }

.di--hover { background: var(--color-gray-25); }

.di--selected { background: var(--color-gray-25); }
.di--selected.di--checkbox { background: var(--color-gray-0); }

.di--disabled { cursor: default; }
.di--disabled .di__label,
.di--disabled .di__counter,
.di--disabled .di__icon { color: var(--color-gray-100); }
.di--disabled .di__avatar { opacity: 0.4; }
.di--disabled .di__box {
  background: var(--color-gray-25);
  border-color: var(--color-gray-50);
}

.di--live:not(.di--disabled):not(.di--selected):hover { background: var(--color-gray-25); }
.di--live:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: -2px;
}

.di--live .di__check { display: none; }
.di--live.di--selected .di__check { display: block; }