.checkout-cart-index {
  // we have to remove this block with CSS not with XML
  // https://github.com/magento/magento2/issues/6983
  .gift-options-cart {
    display: none;
  }

  // remove inherited styles (id has a higher specificity)
  #maincontent .column.main {
    background-color: transparent;
    padding: 0;
  }

  .cart-container {
    display: flex;
    flex-direction: column;

    .form-cart {
      order: 1;

      .table-wrapper {
        background-color: @white;
        padding: @default--space;

        .gt-lg({ padding: @default--space * 2; });
      }
    }

    .cart-discount {
      order: 2;
    }

    .cart-summary {
      order: 3;
    }

    .crosssell {
      order: 4;
    }

    a:not(.beyer-button) {
      &:hover,
      &:focus,
      &:active {
        color: @champagne;
      }
    }
  }

  .cart.main.actions {
    align-items: center;
    display: flex;

    margin-top: @default--space;

    .lt-sm({ flex-wrap: wrap; justify-content: center; });

    .gt-sm({ justify-content: flex-end; });

    .lt-lg({ padding: 0 @default--space; });

    .gt-lg({ padding: 0; });

    a {
      &:link {
        color: @black-60;
      }

      &:hover,
      &:focus,
      &:active {
        color: @champagne;
      }
    }

    .action.continue {
      .visually-hidden();
    }

    .beyer-button {
      .lt-sm({ margin-bottom: @default--space; margin-right: 0; width: 100%; });

      .gt-sm({ margin-left: @default--space; margin-right: 0; });
    }

    .empty-cart {
      order: 2;

      .lt-sm({ margin-bottom: @default--space; });

      .gt-sm({ order: 2; });
    }

    .update-qty {
      order: 1;

      .gt-sm({ order: 3; });
    }
  }

  .cart-discount {
    background-color: @white;

    .gt-sm({ margin-top: @default--space; });

    .lt-lg({ padding: 0 @default--space; });

    .gt-lg({ padding: @default--space @default--space * 2; });

    #block-discount {
      .lt-lg({ margin-bottom: @default--space; });

      .gt-lg({ margin-bottom: 0; });
    }

    .block.discount {
      .field {
        .gt-lg({ margin-top: 0; });
      }
    }

    .discount-coupon-form[class|=container] {
      .reset-padding-lr();
    }

    #coupon_code {
      .gt-sm({ width: 100%; });
    }

    .actions-toolbar {
      margin-top: 0;

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

      button {
        margin-top: 0;

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

  .cart-summary {
    background-color: @white;
    margin-top: @default--space;

    .lt-lg({ padding: (@default--space * 2) @default--space 0; });

    .gt-lg({ padding: (@default--space * 2) (@default--space * 2) 0; });

    .summary-title-wrapper {
      border-bottom: 1px solid @gray-1;
      border-top: 1px solid @gray-1;
      padding: @default--space 0;

      .gt-md({ display: flex; justify-content: flex-end; });
    }

    .summary.title {
      .p5;

      color: @black-60;
      display: block;
      text-transform: uppercase;

      .md({ width: 50%; });

      .gt-lg({ width: 33.333%; });
    }

    // we don't need the 'Estimate shipping costs and tax' block
    .block.shipping {
      display: none;
    }

    .cart-totals {
      .gt-lg({ margin-bottom: @default--space / 2; });
    }

    .table-wrapper {
      .gt-md({ display: flex; justify-content: flex-end; });
    }

    .table.totals {
      .md({ width: 50%; });

      .gt-lg({ width: 33.333%; });

      tr {
        th,
        td {
          border: 0;
          white-space: nowrap;
        }

        &:not(:first-child) {
          th,
          td {
            padding-top: @default--space / 2;
          }
        }

        &:not(:last-child) {
          th,
          td {
            padding-bottom: 0;
          }
        }

        // colon after label but not for grand totals (whitespace issue)
        &:not(.grand) {
          th::after {
            .p5;

            color: @black-60;
            content: ':';
            display: inline-block;
            text-transform: uppercase;
          }
        }

        // colon after the strong tag for grand totals (whitespace issue)
        &.grand {
          th,
          td {
            .p3;
            .bold;

            color: @champagne;
          }

          th strong::after {
            .p3;
            .bold;

            color: @champagne;
            content: ':';
            display: inline-block;
            text-transform: uppercase;
          }
        }
      }

      td {
        text-align: right;
      }
    }

    .checkout-methods-items {
      background-color: @champagne-25;

      .gt-sm({ display: flex; flex-direction: row-reverse; });

      .lt-lg({ margin: 0 -@default--space; padding: @default--space @default--space 0; });

      .gt-lg({ margin: 0 -(@default--space * 2); padding: @default--space 0 0; });

      .item {
        &:not(:first-child) {
          .lt-sm({ margin-top: @default--space; });

          .gt-sm({ margin-right: @default--space; });
        }
      }

      button {
        margin: 0;
      }
    }
  }

  .cart-summary-shipping-payment-wrapper {
    padding: 0 0 @default--space;
  }

  .cart-summary-shipping-payment--shipping {
    .p5;

    .gt-lg({ display: flex; align-content: center; });

    ul {
      .gt-lg({ display: flex; align-items: center });
    }

    li {
      &:not(:last-child) {
        .lt-lg({ margin-bottom: @default--space; });

        .gt-lg({ margin-right: @default--space * 2; });
      }
    }

    beyer-icon {
      margin-right: @default--space / 2;
    }
  }

  .cart-summary-shipping-payment--payment {
    align-items: center;
    display: flex;
    justify-content: flex-end;

    ul {
      .lt-sm({ position: relative; right: -11/@rem; });

      .gt-sm({ display: flex; });
    }

    li {
      .lt-sm({ display: inline; &:nth-child(odd) {
        margin-right: @default--space / 2;
      } &:nth-child(even)::after {
          content: "\A";
          white-space: pre;
        } });

      .gt-sm({ margin-left: @default--space; });
    }

    beyer-icon svg {
      height: 40/@rem;
      width: 40/@rem;
    }
  }

  .crosssell {
    margin: (@default--space * 4) 0 0;

    .lt-lg({ .col-double-gutter; });

    .gt-lg({ .reset-padding-lr(); });

    h2 {
      .lt-md({ .h5; });
    }
  }
}