@import 'Buttons';
@import 'Layout';

.newClaim {
  @include letterboxed();
  padding-top: 50px;
  padding-bottom: 50px;

  h1 {
    font-size: 32px;
    line-height: 36px;
    margin: 20px 0 10px;
  }

  h2 {
    margin-bottom: 40px;
    font-size: 16px;
    font-weight: normal;
  }

  a {
    color: #36b074;
  }

  section.formAndBanner {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-column-gap: 16px;
    align-items: start;

    form {
      label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
      }

      input[type="text"], textarea {
        display: block;
        height: 50px;
        margin-bottom: 10px;
        border-radius: 4px;
        color: #000;
        font-size: 15px;
        padding: 8px 12px;
        width: 100%;
        vertical-align: middle;
        background-color: #ffffff;
        border: 1px solid #cccccc;
      }

      textarea {
        height: 140px;

        &:disabled {
          background-color: lightgrey;
        }
      }

      .fileInput {
        display: flex;
        align-items: center;
        margin-bottom: 30px;

        input {
          display: none;
        }

        button {
          @extend %buttonB;
          margin-right: 12px;
          max-width: 160px;
          width: 160px;
          height: 34px;
          font-size: 13px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
      }

      button {
        @extend %buttonA;
        max-width: 144px;
        padding: 15px 20px;
        border-radius: 6px;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
      }

      .contentTypeSelect {
        width: 100%;
        margin-bottom: 10px;
      }

      .customFields {
        padding: 12px 0;

        button {
          @extend %buttonB;
        }

        .customFieldType {
          margin-bottom: 10px;
          display: flex;
          height: 50px;

          input[type=text] {
            margin: 0 0 0 8px;
            height: auto;
          }
        }
      }
    }

    section.banner {
      padding: 25px;
      border: solid 1px rgb(236, 236, 236);
      border-radius: 4px;
      text-align: center;
      background-color: white;

      img {
        width: 63px;
      }

      h1 {
        font-size: 22.4px;
        font-weight: 700;
        font-family: $roboto-slab;
      }

      h2 {
        font-size: 14px;
      }

      a {
        @extend %buttonB;
      }
    }
  }

}
