sample/src/style/form.scss
@import 'mixin';
@import 'variables';

.pageTitle {
  font-size: 1.6em;
  font-weight: 800;
  text-align: center;
  padding: $half-padding;
  color: $main-color4;
  text-shadow: 0 0 3px $main-color0;
}

.form {
  padding: calc(#{$half-padding} + 6px);

  .body {
    width: calc(90vw - #{$default-padding} - 2 * 6px);
    max-width: 60em;
    padding: $half-padding;
    opacity: 0.8;
    background-color: $background-color0;
    border-radius: 0.2em;
    box-shadow: 0 0 6px 6px rgba($background-color0, 1);
  }

  .label {
    padding: $half-padding;
    padding-bottom: 0;
    width: 10em;
    font-size: 1.1em;
    font-weight: 600;
  }

  .control {
    flex: 1;
    padding: $quarter-padding;
    min-width: 16em;

    .label {
      padding: $quarter-padding;
      font-size: 1em;
    }

    .control {
      padding: 0;
    }
  }

  .description {
    padding: $quarter-padding;

    ~ .subdescription {
      padding-top: 0;
    }
  }

  .subdescription {
    font-size: 0.9em;
    padding: $quarter-padding;
    color: $notable-color;
  }

  .body[data-submitted="true"] {
    .subdescription {
      &-required {
        &[data-required-error="true"] {
          @include errorText;
        }
      }
    }
  }

  .errorField {
    @include errorText;
  }
}

.goatWrapper {
  padding: calc(#{$half-padding} + 6px);

  .goat {
    width: calc(90vw - #{$default-padding} - 2 * 6px);
    max-width: 60em;
    padding: $half-padding;
    opacity: 0.8;
    background-color: $background-color0;
    border-radius: 0.2em;
    box-shadow: 0 0 6px 6px rgba($background-color0, 1);
  }

  .goatField {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    border-bottom: solid 2px $background-color1;

    .goatTitle {
      padding: $half-padding;
      padding-bottom: 0;
      width: 10em;
      font-size: 1.1em;
      font-weight: 600;
    }

    .goatContent {
      flex: 1;
      padding: $half-padding;
      min-width: 16em;
    }
  }
}

