.node-parade-onepage-form,
.node-parade-onepage-edit-form {
  // Ugly hacks
  .field--name-field-menu {
    .field-multiple-table {
      td {
        padding: .5em 0;
      }
      .form-item {
        width: 50%;
        float: left;
        padding-left: .5em;
        input[type="text"] {
          width: 100%;
        }
      }
      .form-type-checkbox {
        width: 100%;
        margin-top: .5em;
        font-size: 13px;
        input,
        label {
          vertical-align: middle;
        }
      }
    }
  }
  .paragraph-type-top {
    clear: none;
    float: none;
    margin-bottom: .5em;
  }
  .paragraphs-subform > .form-wrapper {
    margin: 1em 0;
  }
  .tabledrag-toggle-weight-wrapper,
  td.tabledrag-hide {
    display: none !important;
  }
  .field-multiple-table {
    width: 100%;
    th.field-label {
      text-align: left;
    }
    tr {
      border-bottom: 1px solid #e3e3e3;
      &.even {
        background-color: darken(white, 7%);
      }
    }
    .drag,
    .drag-previous {
      background-color: #f3f3f3;
    }
    td {
      padding: 1.2em 0 1.2em .5em;
    }
    .field-multiple-drag {
      position: relative;
      padding: 1.2em 0;
      width: auto;
      abbr.tabledrag-changed {
        position: absolute;
        color: transparent;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: $parade-lightblue;
      }
      a.tabledrag-handle {
        position: relative;
        z-index: 1;
        margin-left: 0;
        padding-right: 0;
        width: auto;
        height: auto;
        z-index: 1;
        .handle {
          background-position: 0 0;
          height: 17px;
          margin: 5px;
        }
      }
    }
  }
  .paragraph-type-title {
    float: left;
  }
  .paragraphs-button-wrapper {
    margin: 2em 0;
  }
  .parade-button-marketo-form {
    background-image: url('../../images/form.png');
  }
  .parade-actions {
    margin: 0;
    padding: 0;
    display: inline-block;
    list-style: none;
    margin-left: 1em;
    li:first-child {
      margin-left: 0;
    }
    .button {
      padding: 5px 1em;
      color: white;
      background: $parade-lightgrey;
      border: 1px solid darken($parade-lightgrey, 10%);
      box-shadow: none;
      border-radius: 2px;
      text-shadow: none;
      &:hover,
      &:focus {
        background: lighten($parade-lightgrey, 10%);
        color: white;
      }
    }
    > li {
      margin-left: 1em;
      display: inline-block;
      &.edit {
        .button {
          background-color: $parade-blue;
        }
      }
      &.remove {
        .button {
          background-color: darken(white, 50%);
        }
      }
      &.preview {
        .button {
          background-color: darken(white, 25%);
        }
      }
    }
  }
}

.paragraph.paragraph--view-mode--default,
.paragraph.paragraph--view-mode--inverse {
  padding: 40px 1em;
  background-color: #fff;
  // Some fixes for WYSIWYG fields.
  .field.text-formatted {
    .align-right {
      margin-left: 1.5em;
    }
    .align-left {
      margin-right: 1.5em;
    }
  }
}

.paragraph.paragraph--view-mode--custom,
.paragraph.paragraph--view-mode--default,
.paragraph.paragraph--view-mode--inverse,
.node-parade-onepage-edit-form,
.node-parade-onepage-form {
  @include clearfix;
  .paragraph-inner {
    max-width: $page-max-width;
    margin: 0 auto;
  }
  .field--name-parade-call-to-action {
    text-align: center;
    margin: 2em 0;
    // @fixme After tieto_base merge, remove this.
    .button {
      padding: .75em 1.4em;
      background-image: none;
      &:hover,
      &:active,
      &:focus {
        color: #fff;
      }
      + .button {
        margin-left: 1em;
      }
    }
  }
  //             __ _
  //    ____    / _(_)
  //   / __ \  | |_ ___  ___ __ ___   ___
  //  / / _` | |  _| \ \/ / '_ ` _ \ / _ \
  // | | (_| | | | | |>  <| | | | | |  __/
  //  \ \__,_| |_| |_/_/\_\_| |_| |_|\___|
  //   \____/
  //                  _          _    __                       _   _      _          _                    _ _ _
  //                 (_)        | |  / _|                     | | (_)    | |        | |                  | | | |
  //   ___ ___  _ __  _  ___  __| | | |_ _ __ ___  _ __ ___   | |_ _  ___| |_ ___   | |__   __ _ ___  ___| | | |
  //  / __/ _ \| '_ \| |/ _ \/ _` | |  _| '__/ _ \| '_ ` _ \  | __| |/ _ \ __/ _ \  | '_ \ / _` / __|/ _ \ | | |
  // | (_| (_) | |_) | |  __/ (_| | | | | | | (_) | | | | | | | |_| |  __/ || (_) | | |_) | (_| \__ \  __/_|_|_|
  //  \___\___/| .__/|_|\___|\__,_| |_| |_|  \___/|_| |_| |_|  \__|_|\___|\__\___/  |_.__/ \__,_|___/\___(_|_|_)
  //           | |
  //           |_|
  .button {
    display: inline-block;
    font-weight: bold;
    font-family: sans-serif;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.25rem 1rem;
    font-size: 1rem;
    border-radius: 2px;
    transition: all 0.2s ease-in-out;
    color: #5e5e5e;
    background-color: #eeeeee;
    border-color: #999999;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);

    // Overwrite seven theme stuff.
    &.button--danger {
      text-decoration: none;
      background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df);

      &:hover,
      &:focus,
      &:active {
        padding: 0.25rem 1rem;
        border: 1px solid #595959;
        box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
        background-color: #c3c3c3;
        color: #5e5e5e;
      }
    }
  }
  .button:focus,
  .button:active:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
  }
  .button:focus,
  .button:hover {
    text-decoration: none;
  }
  .button:active {
    background-image: none;
    outline: 0;
    box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
  }
  .button:hover {
    color: #5e5e5e;
    background-color: #d5d5d5;
    border-color: #7a7a7a;
  }
  .button:focus {
    color: #5e5e5e;
    background-color: #d5d5d5;
    border-color: #7a7a7a;
  }
  .button:active {
    color: #5e5e5e;
    background-color: #d5d5d5;
    border-color: #7a7a7a;
    background-image: none;
    box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
  }
  .button:active:hover,
  .button:active:focus {
    color: #5e5e5e;
    background-color: #c3c3c3;
    border-color: #595959;
  }
  .button.disabled:focus,
  .button:disabled:focus {
    background-color: #eeeeee;
    border-color: #999999;
  }
  .button.disabled:hover,
  .button:disabled:hover {
    background-color: #eeeeee;
    border-color: #999999;
  }
  .button.disabled,
  .button:disabled {
    background: #eeeeee;
    border-color: #eeeeee;
    color: #c1c1c1;
    cursor: not-allowed;
    box-shadow: none;
  }
  .button--primary,
  .button--blue {
    color: #fff;
    background-color: #62b3e5;
    border-color: #2c89c3;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  }
  .button--primary:hover,
  .button--blue:hover {
    color: #fff;
    background-color: #369ede;
    border-color: #216691;
  }
  .button--primary:focus,
  .button--blue:focus {
    color: #fff;
    background-color: #369ede;
    border-color: #216691;
  }
  .button--primary:active,
  .button--blue:active {
    color: #fff;
    background-color: #369ede;
    border-color: #216691;
    background-image: none;
    box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
  }
  .button--primary:active:hover,
  .button--primary:active:focus,
  .button--blue:active:hover,
  .button--blue:active:focus {
    color: #fff;
    background-color: #228dce;
    border-color: #15405b;
  }
  .button--primary.disabled:focus,
  .button--primary:disabled:focus,
  .button--blue.disabled:focus,
  .button--blue:disabled:focus {
    background-color: #62b3e5;
    border-color: #2c89c3;
  }
  .button--primary.disabled:hover,
  .button--primary:disabled:hover,
  .button--blue.disabled:hover,
  .button--blue:disabled:hover {
    background-color: #62b3e5;
    border-color: #2c89c3;
  }
  .button--green {
    color: #fff;
    background-color: #6cc04a;
    border-color: #6cc04a;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  }
  .button--green:hover {
    color: #fff;
    background-color: #559f38;
    border-color: #519835;
  }
  .button--green:focus {
    color: #fff;
    background-color: #559f38;
    border-color: #519835;
  }
  .button--green:active {
    color: #fff;
    background-color: #559f38;
    border-color: #519835;
    background-image: none;
    box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
  }
  .button--green:active:hover,
  .button--green:active:focus {
    color: #fff;
    background-color: #47852e;
    border-color: #376724;
  }
  .button--green.disabled:focus,
  .button--green:disabled:focus {
    background-color: #6cc04a;
    border-color: #6cc04a;
  }
  .button--green.disabled:hover,
  .button--green:disabled:hover {
    background-color: #6cc04a;
    border-color: #6cc04a;
  }
  .button--orange {
    color: #fff;
    background-color: #f78d2d;
    border-color: #f78d2d;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  }
  .button--orange:hover {
    color: #fff;
    background-color: #e87309;
    border-color: #de6e08;
  }
  .button--orange:focus {
    color: #fff;
    background-color: #e87309;
    border-color: #de6e08;
  }
  .button--orange:active {
    color: #fff;
    background-color: #e87309;
    border-color: #de6e08;
    background-image: none;
    box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
  }
  .button--orange:active:hover,
  .button--orange:active:focus {
    color: #fff;
    background-color: #c66208;
    border-color: #9e4e06;
  }
  .button--orange.disabled:focus,
  .button--orange:disabled:focus {
    background-color: #f78d2d;
    border-color: #f78d2d;
  }
  .button--orange.disabled:hover,
  .button--orange:disabled:hover {
    background-color: #f78d2d;
    border-color: #f78d2d;
  }
  .button--red {
    color: #fff;
    background-color: #e56385;
    border-color: #e56385;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  }
  .button--red:hover {
    color: #fff;
    background-color: #de3763;
    border-color: #dc2f5c;
  }
  .button--red:focus {
    color: #fff;
    background-color: #de3763;
    border-color: #dc2f5c;
  }
  .button--red:active {
    color: #fff;
    background-color: #de3763;
    border-color: #dc2f5c;
    background-image: none;
    box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
  }
  .button--red:active:hover,
  .button--red:active:focus {
    color: #fff;
    background-color: #cf2250;
    border-color: #ac1d42;
  }
  .button--red.disabled:focus,
  .button--red:disabled:focus {
    background-color: #e56385;
    border-color: #e56385;
  }
  .button--red.disabled:hover,
  .button--red:disabled:hover {
    background-color: #e56385;
    border-color: #e56385;
  }
}

.field--type-entity-reference-revisions .field--name-parade-paragraphs {
  .paragraph-type-top .paragraphs-dropbutton-wrapper {
    margin-top: 0;

    .button.form-submit {
      background-color: grey;
      background-image: none;
      color: white;
      border: 1px solid #c6c6c6;
      box-shadow: none;
      border-radius: 2px;
      text-shadow: none;
      display: inline-block;
      margin-left: 1em;
    }

    li {
      list-style: none;
      display: inline-block;

      &.preview .button {
        background-color: #bfbfbf;
      }
    }
  }
}