: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 {
  border: 1px solid var(--theme-secondary-color);
  border-radius: 4px;
  font-size: 1rem;
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
  /* Make room for the brand icon */
  padding: 0.2rem 40px 0.2rem 0.2rem;

}


.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;
}

.card-brands-container {
  display: grid;
  /*flex-direction: row;*/
  justify-content: center;
  gap: 0.25rem;
  align-items: center;
  /*flex-shrink: 0;*/
  height: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}

.card-brands-container span {
  height: 1.5rem
  /*height: 100%;*/
  /*width: 100%;*/
}

.brand-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 16px;
  z-index: 10;
  pointer-events: none; /* Allows clicking through to the input */
}

.input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.brand-icons-overlay {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 5px;
  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;
}