*,
.context,
.ad.hoc {
  &.container {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    margin: 0.1em;
    position: relative;
  }

  &.children {
    width: 100%;
  }

  &.input {
    border: 1px solid gray;
    border-radius: 0.3em;
    cursor: text;
    font: inherit;
    flex: 1;
    outline: none;
    padding: 0.3em 0.3em calc(0.3em + 1px);

    &:focus {
      border-color: blue;
      box-shadow: 0 0 3px 1px lightblue;
    }
  }

  &.label {
    margin: 0 0.6em 0 1.5em;
    pointer-events: none;
  }

  &.error &.input {
    border-color: red;

    &:focus {
      box-shadow: 0 0 3px 1px orangered;
    }
  }

  &.errorMessage {
    color: red;
    font-size: 0.8em;
    font-style: italic;
    padding-right: 0.6em;
    text-align: right;
    width: 100%;
  }
}