.checkout-index-index {
  .checkout-payment-method {
    .payments {
      .legend {
        display: none;

        + br {
          display: none;
        }
      }

      [type="checkbox"],
      [type="radio"] {
        &:checked + label {
          .bold;
        }
      }

      .step-title {
        margin-bottom: @default--space;
      }
    }

    .payment-method {
      border-top: 1px solid @gray-1;

      &:last-child {
        border-bottom: 1px solid @gray-1;
      }

      .payment-method-title {
        display: flex;
        align-items: center;

        // we need here a higher specificity
        &.field.choice {
          margin: 0;
          padding: @default--space 0;
        }

        .radio {
          height: @default--space;
          margin-right: @default--space / 1.5;
          width: @default--space;
        }

        .label {
          .lt-lg({ .p3; });

          .gt-lg({ .p4; });
        }

        .payment-icon {
          display: inline-block;
          margin-right: @default--space / 2;
          vertical-align: middle;
        }

        .action-help {
          display: none;
        }
      }

      .payment-method-content {
        display: none;

        margin-bottom: @default--space;

        .payment-method-billing-address {
          .p4;

          margin-left: @default--space * 1.5;

          .billing-address-same-as-shipping-block {
            display: flex;
            align-items: flex-start;

            [type="checkbox"] {
              flex-shrink: 0;
              height: @default--space;
              margin-right: @default--space / 1.5;
              position: relative;
              top: 6/@rem;
              width: @default--space;
            }
          }

          .billing-address-details {
            margin-top: @default--space / 2;

            .action-edit-address {
              .beyer-button;
              .beyer-button--small;
              .beyer-button--raised;
              .beyer-button--raised-champagne-25;

              .reset-margin-lr();

              margin-top: @default--space / 2;
            }
          }

          .field-select-billing {
            margin-top: @default--space / 2;

            label {
              display: none;
            }
          }

          .billing-address-form {
            margin-top: @default--space;

            .field._required .label span,
            fieldset.required .label span {
              &::after {
                content: '*';
                display: inline-block;
              }
            }

            fieldset.field.street {
              legend.label {
                .h8;

                color: @black-40;
              }

              .field {
                & + .field {
                  margin-top: @default--space;
                }

                .label {
                  display: none;
                }
              }
            }
          }

          .actions-toolbar {
            .primary {
              .gt-sm({ margin-top: 0; });
            }

            button + button {
              margin-top: @default--space;
            }

            .action-cancel {
              .beyer-button--outline;
              .beyer-button--outline-champagne;
            }
          }
        }

        .payment-method-instructions {
          &::before {
            .hr-gray-wide();
          }

          margin-left: @default--space * 1.5;
          margin-top: @default--space;
        }

        .field.payment-image,
        .field.payment-description {
          display: none;
        }

        .message {
          .p5;

          margin-left: @default--space * 1.5;

          &.info {
            color: @secondary-red;
          }
        }

        .payment-method-note {
          .p5;

          margin-left: @default--space * 1.5;
          margin-top: @default--space;
        }

        .checkout-agreement {
          align-items: flex-start;
          border-top: 1px solid @black-10;
          display: flex;
          flex-wrap: wrap;
          margin-left: @default--space * 1.5;
          margin-top: @default--space;
          padding-top: @default--space;

          [type="checkbox"] {
            .p4;

            flex-basis: @default--space;
            flex-shrink: 0;
            height: @default--space;
            margin-right: @default--space / 1.5;
            position: relative;
            top: 4/@rem;
            width: @default--space;
          }

          label {
            flex-basis: ~"calc(100% - @{default--space} - (@{default--space} / 1.5))"; // 100% - checkbox width - checkbox margin right
          }

          button {
            background: transparent;
            border: 0;
            padding: 0;
            text-align: left;

            span {
              .p5;
              .light;

              color: @black-80;
            }
          }

          a {
            text-decoration: underline;
            text-decoration-color: @black-40;

            &:hover {
              color: @champagne;
              text-decoration-color: @champagne;
            }

            &:focus {
              color: @black-80;

              &:hover {
                color: @champagne;
              }
            }
          }
        }

        // we need here the div tag as prefix
        div.mage-error {
          margin-left: @default--space + (@default--space / 1.5);
          margin-top: @default--space / 2;
        }

        .actions-toolbar {
          margin-top: 0;

          button {
            .beyer-button;
            .beyer-button--raised;
            .beyer-button--raised-champagne;

            .reset-margin-lr();

            .lt-sm({ width: 100%; });
          }
        }
      }

      &._active {
        .payment-method-title {
          // we need here a higher specificity
          &.field.choice {
            padding-bottom: 0;
          }
        }

        .payment-method-content {
          display: block;
        }
      }
    }

    .discount-code {
      margin-top: @default--space;

      .payment-option-title {
        display: none;
      }

      .payment-option-content {
        .reset-padding-lr();

        display: block;

        .form-discount {
          .gt-lg({ flex-direction: column; });
        }

        .label {
          display: none;
        }

        .gt-sm({ .input-text, .beyer-button {
          width: 100%;
        } });
      }

      .actions-toolbar {
        margin-top: 0;

        .primary {
          .sm({ margin-top: 0; });
        }
      }

      .message {
        margin-bottom: @default--space / 2;

        &.error {
          color: @secondary-red;
        }

        &.success {
          color: @secondary-green;
        }
      }
    }
  }
}
