.wpforms-container {
  & .wpforms-field-label {
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: normal !important;
  }

  & input[type="date"],
  & input[type="datetime"],
  & input[type="datetime-local"],
  & input[type="email"],
  & input[type="month"],
  & input[type="number"],
  & input[type="password"],
  & input[type="range"],
  & input[type="search"],
  & input[type="tel"],
  & input[type="text"],
  & input[type="time"],
  & input[type="url"],
  & input[type="week"],
  & select,
  & textarea {
    background: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--accent-2);
    border-radius: 4px;
    padding: 1rem;
  }

  & .wpforms-submit {
    background-color: var(--wp--preset--color--accent-1);
    border: 2px solid var(--wp--preset--color--accent-1);
    border-radius: 3.125rem;
    color: var(--wp--preset--color--base);
    cursor: pointer;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: calc(1rem - 2px) calc(1.5rem - 2px);

    &:hover {
      background-color: var(--wp--preset--color--base);
      border-color: var(--wp--preset--color--accent-1);
      color: var(--wp--preset--color--contrast);
    }
  }
}

/* Buttons */
.button-outline-sm {
  background-color: var(--wp--preset--color--base);
  border: 2px solid var(--wp--preset--color--accent-1);
  border-radius: 9999px;
  color: var(--wp--preset--color--contrast);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: calc(0.5rem - 1px) calc(1rem - 1px);

  &:hover {
    background-color: var(--wp--preset--color--accent-1);
    color: var(--wp--preset--color--base);
  }
}
