:where(form) {

  & > .actions,
  & .form-actions {
    display: flex;
    justify-content: start;
    align-items: baseline;
    margin-block: 0.5lh;
    gap: 0.5rem;
    
    .right {
      margin-left: auto;
    }
  }

  &.bordered {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2);
    padding: var(--grid-gutter);

    input:not([type="checkbox"], [type="radio"]), select, textarea {
      border: var(--border-size-1) solid var(--border-color);
    }
  }

}

:where(form.inline) {
  display: flex;
  align-items: end;
  gap: 1rem;
  margin-block: 1rem;

  .field {
    margin-block: 0;
  }

  .field.full {
    flex-grow: 1;
  }

  input,
  select,
  textarea {
    margin-block: 0;
  }

  & > .actions,
  & .form-actions {
    margin-block: 0;
  }

  .button,
  button,
  input[type="submit"],
  input[type="reset"] {
    padding-block: 0.425rem;
    padding-inline: 0.75rem;  
  }

}

.form-message {
  display: block;
  text-align: left;
  margin-block-end: 1lh;
  font-size: var(--font-size-xs);
}