.bl-field {
  display: block;
}

.bl-field-label {
  display: block;
  margin-bottom: var(--bl-space-1);
  color: var(--bl-color-text-muted);
  font-size: var(--bl-text-small);
  font-weight: 500;
}

.bl-field-control {
  position: relative;
  display: flex;
  align-items: center;
}

.bl-field-icon {
  position: absolute;
  left: var(--bl-space-3);
  display: flex;
  color: var(--bl-color-text-muted);
  pointer-events: none;
}

.bl-field-input {
  width: 100%;
  min-height: 2.875rem;
  padding: 0 var(--bl-space-3);
  border: var(--bl-line-width) solid var(--bl-violet-soft);
  border-radius: var(--bl-radius-card);
  background-color: var(--bl-color-surface);
  font-size: var(--bl-text-body);
}

.bl-field-input:hover {
  border-color: var(--bl-color-accent-mid);
}

.bl-field-input:focus {
  border-color: var(--bl-color-accent-mid);
  background-color: var(--bl-color-surface-raised);
}

.bl-field-input:focus-visible,
.bl-field-inline:focus-visible {
  outline: var(--bl-line-width) solid var(--bl-color-accent);
  outline-offset: 0;
  border-color: var(--bl-color-accent);
}

.bl-field-lead .bl-field-input {
  padding-left: 2.5rem;
}

.bl-field-trail .bl-field-input {
  padding-right: 2.75rem;
}

.bl-field-action {
  position: absolute;
  right: var(--bl-space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--bl-radius-button);
  background-color: transparent;
  color: var(--bl-color-accent-mid);
}

.bl-field-note {
  margin-top: var(--bl-space-1);
  color: var(--bl-color-text-faint);
  font-size: var(--bl-text-tiny);
}

.bl-field-inline {
  width: 100%;
  min-height: 2.25rem;
  padding: 0 var(--bl-space-3);
  border: var(--bl-line-width) solid var(--bl-color-border-soft);
  border-radius: var(--bl-radius-button);
  background-color: var(--bl-color-surface);
  font-size: var(--bl-text-small);
}

.bl-field-inline:focus {
  border-color: var(--bl-color-accent-mid);
}

.bl-field-input:focus:not(:focus-visible),
.bl-field-inline:focus:not(:focus-visible) {
  outline: none;
}