.admin-color-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

/* Hospedeiro do rotulo dentro de uma opcao ou do valor fechado de um seletor. */
.admin-color-label-host {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.admin-color-label-host > .admin-color-label {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-color-label-swatch {
  display: block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(55, 53, 47, 0.16);
  border-radius: 3px;
  box-sizing: border-box;
  /* Fallback da amostra sem cor valida, como o swatch do editor de cor. */
  background: #fff;
}

/* O nome precisa ser um bloco de texto: `text-overflow` nunca age sobre um
   container flex. */
.admin-color-label-name {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}