.card-config {
  display: block;
}

.option {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.option ha-switch {
  --mdc-theme-secondary: var(--switch-checked-color);
}

.option ha-select,
.option ha-textfield {
  width: 100%;
}

.option ha-select.small,
.option ha-textfield.small {
  width: 120px;
}

.option ha-textfield.full,
.option ha-select.full {
  flex-grow: 1;
  width: auto;
}

.option ha-formfield {
  padding-bottom: 0.5rem;
}

.flex-space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-title {
  font-size: large;
  line-height: 200%;
}

.navigation {
  display: flex;
  justify-content: center;
}

ha-icon-button {
  color: var(--primary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

ha-icon {
  display: inline-flex;
}

ha-form-grid {
  display: grid;
  grid-template-columns: repeat(
    var(--form-grid-column-count, auto-fit),
    minmax(var(--form-grid-min-width, 200px), 1fr)
  );
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.severity-row {
  margin-bottom: 0.5rem; /* Ajoute une marge en dessous de chaque bloc .severity-row */
}

.severity-row ha-textfield {
  margin-right: 0.5rem;
}

.severity-row .input-line {
  display: flex;
  margin-bottom: 0.5rem; /* Ajustez l'espacement sous la ligne */
}

.severity-row .input-line ha-textfield {
  flex: 1; /* Permet aux champs de prendre l'espace disponible de manière égale */
}

.severity-row .below-line {
  display: flex;
  align-items: center; /* Aligne verticalement le label et les icônes */
  gap: 1rem; /* Ajustez l'espacement entre le label et les icônes */
  margin-top: 0.5rem; /* Ajoutez un peu d'espace au-dessus de cette ligne */
}

.severity-row .below-line .label-input {
  flex: 1; /* Permet au label de prendre l'espace disponible, poussant les icônes à droite */
  width: auto; /* Réinitialise la largeur à auto pour qu'il ne prenne pas toute la largeur initialement */
}

.severity-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.severity-icons .compact-icon {
  --mdc-icon-button-size: 32px;
  --mdc-icon-size: 20px;
  padding: 0 !important;
  margin: 0 !important;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.severity-icons .compact-icon ha-icon {
  width: 20px;
  height: 20px;
}
