:host {
  display: block;
}

.field-container {
  display: grid;
  grid-template-columns: 10em 1fr 20px;
  align-items: center;
  gap: 1rem;
}

.custom-label {
  color: var(--theme-primary-color);
  text-align: right;
  align-items: center;
  font-weight: bold;
  gap: 0.5rem;
}

.custom-input,
.custom-input.active,
.custom-input.inactive {
  padding: 0.2rem;
  border-radius: 4px;
  font-size: 1rem;
  border: 1px solid var(--theme-secondary-color);
}

.custom-input.active {
  background-color: var(--theme-input-active-background);
}

.custom-input.inactive {
  background-color: var(--theme-input-inactive-background);
}

input:read-only {
  pointer-events: none;
}

.validity {
  background-color: var(--theme-primary-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z'/%3E%3C/svg%3E");
  height: 1.0rem;
  width: 1.0rem;
  cursor: pointer;
  pointer-events: auto;
  flex-shrink: 0;
}

.validity.valid {
  background-color: var(--theme-primary-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E");
  height: 1.0rem;
  width: 1.0rem;
  cursor: pointer;
  flex-shrink: 0;
}

.validity.none {
  background-color: transparent;
  height: 1.0rem;
  width: 1.0rem;
  flex-shrink: 0;
}