/* Nicer inputs */
button, input, select, textarea {
  padding: 0.33em;

  font: inherit;
  letter-spacing: inherit;

  border: 1px solid #cdc7c2;
  border-radius: 4px;
  border-style: solid;
}
/* Exception: input type file shouldn't have a border */
input[type="file"] {
  border: 0;
}

/* Padding within buttons */
button, input[type="button"], input[type="submit"], input[type="reset"] {
  padding: 0.33em 0.66em;
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover,
select:not([multiple]):hover {
  background-color: #cdcdd0;
}

fieldset {
  border: 0;
}

/* Copy fieldset defaults */
details.collapsible-fieldset {
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
}

/* Make them look more like a h2 thing with a nice pseudo-hr at the bottom */
fieldset > legend,
details.collapsible-fieldset > summary {
  width: 100%;
  margin-bottom: 0.33em;

  font-size: medium;
  font-weight: normal;

  color: var(--vn-primary-color);
  border-bottom: 1px solid var(--line-color);
}

/* Header version */
fieldset.header > legend,
details.collapsible-fieldset.header > summary {
  width: 100%;

  font-size: 1.5em;
  font-weight: normal;

  color: var(--vn-primary-color);
  border-bottom: 1px solid var(--line-color);
}

/* Make requiered form elements more obvious */
.required:before {
  content: "* ";
  color: red;
}

/* This class is used as a wrapper for label + input and possibly field-info */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.inline-input {
  display: flex;
  flex-direction: row;
  column-gap: 0.5em;
}
.inline-input > input {
  align-self: stretch;
  width: 100%;
}
.inline-input > button {
  align-self: flex-end;
}

/* This class is used as a caption or help text for form elements */
.field-info {
  font-style: italic;
  font-size: small;

  color: var(--text-lighter-color);
}

/* Header with in-line controls */
.header-with-controls {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  row-gap: 0.33em;
  margin-top: 1em;
  margin-bottom: 1em;
}
.header-with-controls > * {
  margin-bottom: 0;
}
.controls {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.5em 1em;
}
.spacer-follows {
  margin-right: auto;
}

/* Common button colors */

.constructive {
  color: white;
  background-color: var(--constructive-lighter-color);
  border-color: var(--constructive-color);
}
.constructive:hover {
  background-color: var(--constructive-color);
}
.constructive:active {
  background-color: var(--constructive-darker-color);
}

.destructive {
  color: white;
  background-color: var(--destructive-lighter-color);
  border-color: var(--destructive-color);
}
.destructive:hover {
  background-color: var(--destructive-color);
}
.destructive:active {
  background-color: var(--destructive-darker-color);
}