/* site.css */
/* Form Default Styles */
article main form {
  font-size: 16px;
  /*paper-input doesn't like our font-sizes */
}

paper-input,
paper-textarea {
  display: block;
  /*height: 62px; no idea why this was here but it caused me all sorts of problems!!! */
}

article form .text-right button[type="submit"] {
  border: none;
  border-radius: 2px;
  background: #4caf50;
  color: #FAFAFA;
  cursor: pointer;
  letter-spacing: 0.49px;
  outline: none;
  padding: 10px;
  text-transform: uppercase;
}

/* end site.css */
form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: inherit;
  margin: 0 auto;
  padding: 0.5rem;
  position: relative;

  fieldset {
    border: none;
    box-sizing: border-box;
    display: flex;
    border: 0;
    position: relative;
    padding: 0;
    margin: 0;

    legend {
      display: block;
      font-size: 125%;
      padding: 0.5rem 0;

      >* {
        display: inline-block;
      }
    }

    label, div.checkbox-group {
      color: var(--surface-color-bold-alt);

      small {
        color: var(--surface-color);
      }
    }

    input {
      text-align: left;
      padding-top: 1px;
      padding: 6px 12px;
      width: auto;
      border: 1px solid var(--surface-color-bold-alt);
      border-radius: 2px;
      vertical-align: top;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      -webkit-transition: border-color ease-in-out 0.15s,
        -webkit-box-shadow ease-in-out 0.15s;
      -o-transition: border-color ease-in-out 0.15s,
        box-shadow ease-in-out 0.15s;
      transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;

      &[type="checkbox"],
      &[type="radio"] {
        vertical-align: initial;
      }
    }

    input[placeholder]:invalid:required:not(:placeholder-shown):not(:focus),
    textarea[placeholder]:invalid:required:not(:placeholder-shown):not(:focus) {
      border-color: red;
    }

    input[type="search"] {
      &:has(+ button) {
        margin-right: 0.63em;
      }
    }

    button[type="submit"] {
      all: unset;
      background: var(--surface-highlight-background);
      color: var(--surface-highlight-color);
      font-size: 125%;
      font-weight: bold;

      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      -ms-touch-action: manipulation;
      touch-action: manipulation;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      background-image: none;
    }

    &:has(input[type="search"]) {
      button[type="submit"] {
        background: transparent;
        color: var(--surface-color-bold-alt);
        fill: var(--surface-color-bold-alt);
        stroke: var(--surface-color-bold-alt);
      }
    }
  }
}