:root {
  --transition-duration: .25s;
  --transition-timing-function: ease-out;
}

form,
.form {
  --padding: 1.2rem;
  display: flex;
  flex-direction: column;
  padding: var(--gap);
}

fieldset {
  /* ignore this container */
  border: none;
  display: contents;
}

legend {
  display: none;
  width: 100%;
}
#newMessage legend {
  display: block;
}

input,
textarea {
  color: var(--color);
  font-size: 1.6rem;
}

button,
label {
  color: var(--color);
  cursor: pointer;
  display: block;
  font-size: 1.6rem;
  margin-bottom: 0;
  padding: var(--padding);
  text-indent: 0;
  transition: background-color var(--transition-duration);
}

input[type="number"],
input[type="password"],
input[type="text"],
input[type="url"],
textarea {
  background: var(--bgcolor-textinput);
  border: .2rem solid #b7b7b7;
  border-radius: .2rem;
  display: block;
  margin: 0 0 1.2rem 0;
  padding: var(--padding);
}
input[type="number"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
textarea:focus {
  border-color: var(--focus-border-color);
  outline-offset: var(--focus-outline-offset);
  outline: var(--focus-outline);
}
input:invalid {
  outline: 2px solid var(--bgcolor-danger);
  outline-offset: var(--focus-outline-offset);
}
textarea {
  /* max-height: 64vh; */
  min-height: 20px;
  resize: none;
  transition: min-height var(--transition-duration) var(--transition-timing-function),
              height var(--transition-duration) var(--transition-timing-function);
}
textarea:focus {
  min-height: 3.5rem;
}
#newMessage textarea {
  min-height: 10rem;
}
#newMessage textarea:focus {
  min-height: 18rem;
}
@media (orientation: portrait) {
  #newMessage textarea {
    min-height: 8rem;
  }
  #newMessage textarea:focus {
    min-height: 15rem;
  }
}

.buttons {
  align-items: center;
  display: flex;
  flex-basis: 100%;
  gap: var(--gap);
  justify-content: start;
  margin-top: var(--gap-half);
  min-height: 3.2rem;
}
form .buttons,
.form .buttons,
.form-inline .buttons {
  flex-basis: fit-content;
  justify-content: end;
}

.buttons img,
.buttons small,
.buttons span {
  vertical-align: middle;
}

button {
  --bg-color: var(--bgcolor-accent);
  --border-color: var(--bgcolor-accent);
  background-color: var(--bg-color);
  border: 0.2rem solid var(--border-color);
  border-radius: .2rem;
  cursor: pointer;
  outline-offset: 1px;
  word-break: normal;
}

button:focus {
}

.btn-inline {
  --border-color: transparent;
  background: transparent;
  color: var(--color-accent);
  display: inline-block;
  line-height: 1;
  padding: 0 .6rem;
}

.btn-danger {
  background: var(--bgcolor-danger);
}

button:disabled {
  --bg-color: var(--bgcolor-inactive);
  --border-color: var(--bgcolor-inactive);
  cursor: default;
}

.form-status {
  flex-basis: 100%;
  flex-grow: 1;
  min-height: 1.8rem;
  padding: var(--padding);
}

.form-inline {
  --padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  flex-wrap: wrap;
  padding: 0;
}
.form-inline * + * {
  margin-left: var(--gap);
}
.form-inline button,
.form-inline input[type="number"],
.form-inline input[type="text"],
.form-inline textarea {
  margin: .4rem 0;
}

.form-inline input[type="number"],
.form-inline input[type="text"],
.form-inline textarea {
  flex-basis: 50%;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 100px;
  margin-bottom: 0;
}

.form-inline button {
  flex-grow: 0;
}

label.number {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--gap);
  padding: 0;
}
* + label.number {
  margin: var(--gap) 0 0 0;
}
label.number span {
  flex-grow: 1;
  padding: 0 0 0 var(--padding);
}
label.number input[type="number"] {
  align-self: baseline;
  margin-bottom: 0;
}
@media (orientation: landscape) {
  label.number span {
    align-self: center;
  }
  label.number input[type="number"] + span {
    padding: 0 var(--padding) 0 0;
  }
}
@media (orientation: portrait) {
  label.number {
    flex-direction: column;
    gap: var(--gap-half);
    padding: 0;
  }
  label.number span {
    padding: 0 var(--padding);
  }
  label.number input[type="number"] {
    align-self: stretch;
  }
}

button#publish {
  align-self: end;
  order: 2;
}
button[name="back"] {
  display: none;
}
#newMessage button[name="back"] {
  align-self: end;
  display: inherit;
}

#sendstatus {
  margin-left: 0;
  order: 1;
}

.focus-active {

}

.shrink-out {
  animation-duration: var(--transition-duration);
  animation-name: lineInserted;
  transition: max-height calc(.5 * var(--transition-duration)) var(--transition-timing-function);
}
@keyframes lineInserted {
  from {
    max-height: 50px;
  }
  to {
    max-height: 0px;
  }
}