/* Ignore List page of the game menu (Menu > Ignore List): the name box uses the shared text-field and ui-button looks
   (see text-field.css and controls.css), see theme.css for the colors */
.ignore-list-intro {
  flex: 0 0 auto;
  margin-bottom: 8px;
  padding: 0 2px;
  font-size: 11px;
  font-weight: normal;
  line-height: 1.5;
  color: var(--color-text-soft);
}

/* Name box and the Ignore button on one row */
.ignore-list-form {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.ignore-list-form > .text-field-box,
.ignore-list-form > .text-field {
  flex: 1 1 auto;
  min-width: 0;
}

.ignore-list-entries {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 5px;
}

/* Ignored player: block icon, name and the Unignore button */
.ignore-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid black;
  border-radius: 8px;
  background-image: var(--gradient-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.6);
}

.ignore-list-row-icon {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--color-danger);
}

.ignore-list-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: bold;
}

/* Buttons of the form and the rows: shared ui-button look, a bit smaller */
.modal button.ignore-list-button {
  flex: 0 0 auto;
  margin: 0;
  padding: 3px 10px;
  font-size: 10px;
}

.ignore-list-empty {
  padding: 12px 8px;
  font-size: 10px;
  font-weight: normal;
  font-style: italic;
  text-align: center;
  color: var(--color-text-muted);
}

.ignore-list-note {
  flex: 0 0 auto;
  margin-top: 10px;
  padding: 0 2px;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.5;
  color: var(--color-text-muted);
}