.input,
.input * {
  box-sizing: border-box;
}

.input {
  position: relative;
  overflow: visible;
  width: 250px;
}

.input input {
  width: 100%;
  height: 50px;
  border: 1px solid var(--textbox-75);
  border-radius: 16px;
  padding: 10px 20px;
  background-color: var(--textbox-50);
  color: var(--foreground);
  font-size: 16px;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.input input:hover {
  background-color: var(--textbox-75);
  border-color: var(--textbox-100);
}

.input input:focus {
  outline: none;
  background-color: var(--textbox-100);
  border-color: var(--primary-100);
  box-shadow: 0 0 0 2px var(--primary-50);
}