:host {
  display: block;
}

form {
  display: grid;
  grid-template-columns: var(--size-16) 1fr;
  grid-gap: var(--scale-0);
}

label {
  grid-column: 1 / 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

input,
pos-select-term,
button {
  grid-column: 2 / 3;
}

input,
pos-select-term::part(input) {
  outline: var(--pos-input-outline);
  padding: var(--scale-000);
  border: none;
  border-radius: var(--radius-xs);
  width: var(--size-full);
  box-sizing: border-box;
  background: var(--pos-input-background-color);
  color: var(--pos-normal-text-color);
}

input:focus-within,
pos-select-term::part(input):focus-within {
  outline: var(--pos-input-focus-outline);
}

#new-uri {
  grid-column: 1/3;
  cursor: default;
  word-break: break-all;
  color: var(--pos-normal-text-color);
  font-weight: var(--weight-light);
  background: var(--pos-disabled-color);
  padding: var(--scale-000);
  border-radius: var(--radius-xs);
}

input#create {
  outline: none;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  color: var(--pos-primary-text-color);
  background-color: var(--pos-primary-color);
}

input#create:disabled {
  cursor: default;
  color: var(--pos-disabled-text-color);
  background-color: var(--pos-disabled-color);
  box-shadow: none;
}

input#create:hover:not(:disabled),
input#create:focus {
  filter: brightness(110%);
  box-shadow: var(--shadow-md);
}