/****************************************************************************** 
* Comment Form
******************************************************************************/

  .comment-form {

    p {
      align-items: center;
      background-color: $grey-300;
      border-radius: 0.25rem;
      display: flex;
      justify-content: space-between;
      margin-bottom: 1px;
      margin-top: 0;
      padding: 1rem 1rem 1rem 1rem;
    }

    label {
      cursor: pointer;
      font-size: 0.875rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .comment-form-cookies-consent label {
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
    }

    .comment-notes,
    .logged-in-as {
      background-color: transparent;
      display: block;
      padding: 0 0 1rem 0;
      a:first-child {
        font-weight: 700;
      }
    }

    .comment-form-cookies-consent,
    .form-submit {
      background-color: transparent;
      display: block;
      padding: 1rem 0 0 0;
      text-align: right;
    }

    input[type="checkbox"] {
      position: relative;
      top: 1px;
    }

    input[type="submit"] {
      background-color: $color-800;
      border: 0;
      box-shadow: 0 0 1rem 0 $grey-200;
      color: $white;
      cursor: pointer;
      display: inline-block;
      min-width: 14rem;
      padding: 1rem;
      text-align: center;
      text-decoration: none;
      -webkit-transition: all ease-in-out 600ms;
      -moz-transition: all ease-in-out 600ms;
      -ms-transition: all ease-in-out 600ms;
      -o-transition: all ease-in-out 600ms;
      transition: all ease-in-out 600ms;

      &:hover,
      &:focus,
      &:active {
        background-color: $color-600;
      }
    }

    textarea,
    input[type="text"],
    input[type="email"],
    input[type="url"] {
      border: 1px solid rgba($black, 0.12);
      border-radius: 0;
      flex: 0 0 66%;
      -webkit-transition: all ease-in-out 600ms;
      -moz-transition: all ease-in-out 600ms;
      -ms-transition: all ease-in-out 600ms;
      -o-transition: all ease-in-out 600ms;
      transition: all ease-in-out 600ms;

      &:focus {
        border: 1px solid $color-600;
      }
    }
  }

/****************************************************************************** 
* Comment Form Mobile
******************************************************************************/

  @media (max-width: $breakpoint-desktop) {

    .comment-form {

      p {
        flex-direction: column;
        padding-bottom: 1.5rem;
      }

      label {
        padding: 0 0 1rem 1rem;
        width: 100%;
      }
      
      textarea,
      input[type="text"],
      input[type="email"],
      input[type="url"] {
        flex: 1 1;
        width: calc(100% - 1rem);
      }
    }
  }