.input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--color-1) 20%, transparent);
  border-radius: 10px;
  background: transparent;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-1);
  opacity: 1;
}

.input-with-button {
  position: relative;
}

.input-with-button input {
  height: 52px;
  padding-inline: 24px 140px;
  border-radius: 30px;
}

.input-with-button button {
  position: absolute;
  inset-block: 5px;
  right: 5px;
  height: auto;
}

.textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--color-1) 20%, transparent);
  border-radius: 1.25rem;
  background: transparent;
}

.select {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OTkgMjg1Ij48cGF0aCBmaWxsPSIjMTU0NzBCIiBkPSJNMCAzNWEzNSAzNSAwIDAgMSA1OS43NS0yNC43NmwxODkuNzQgMTg5Ljc1TDQzOS4yMyAxMC4yNGEzNS4wMDIgMzUuMDAyIDAgMSAxIDQ5LjUgNDkuNWwtMjE0LjQ5IDIxNC41YTM1IDM1IDAgMCAxLTQ5LjUgMEwxMC4yNSA1OS43NEEzNC44OSAzNC44OSAwIDAgMSAwIDM1WiIvPjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-size: 0.75rem;
  background-position: right 16px center;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--color-1) 20%, transparent);
  border-radius: 10px;
  background-color: transparent;
  color: var(--color-1);
}