@include export-module('co-checkout-layout') {
  .co-checkout {
    display: block;
    width: 100%;
    .co-stepper {
      &.no-cart {
        .co-stepper-content-wrapper {
          justify-content: center;
        }
      }
    }
    .co-stepper-content-wrapper {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      column-gap: $tp-checkout-column-gap;
      padding: $tp-checkout-padding;
      width: $tp-checkout-wrapper-max-width;
      max-width: 100%;
      margin: 0 auto;
    }
    .co-stepper-step {
      flex-basis: $tp-checkout-default-width;
      flex-grow: 1;
      flex-shrink: 1;
      max-width: $tp-checkout-max-width;
    }
    .co-checkout-right-panel {
      display: flex;
      flex-direction: column;
      row-gap: $tp-checkout-right-panel-row-gap;
      flex-basis: $tp-checkout-right-panel-width;
      flex-grow: 1;
      flex-shrink: 1;
      max-width: $tp-checkout-right-panel-max-width;
      width: 100%;
      .cart-header-label {
        display: none;
      }
      .button-edit-cart {
        text-decoration: underline;
      }
    }
    .co-checkout-right-panel-relation {
      display: flex;
      justify-content: flex-end;
    }
    .co-checkout-overview-payment {
      width: 100%;
      .checkout-label-column {
        margin-bottom: 15px;
      }
    }
    co-form {
      flex: 1;
      .co-input-text {
        &:before {
          box-shadow: none;
        }
        label {
          padding-right: 20px;
        }
      }
      .co-list-of-values {
        &:before {
          box-shadow: none;
        }
      }
    }
    .co-shopping-cart-preview {
      min-width: 35%;
      background: $tp-checkout-co-shopping-cart-preview-background;
      padding: 30px;
    }
    .checkout-form-wrapper {
      display: flex;
      flex-direction: column;
      row-gap: 15px;
    }
    .checkout-section-wrapper {
      display: flex;
      flex-direction: row;
    }
    .checkout-label-column {
      font-family: $tp-checkout-label-column-font-family;
      font-size: $tp-checkout-label-fontsize;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      .label-description {
        font-size: $tp-checkout-label-description-fontsize;
        font-weight: $tp-checkout-label-description-fontweight;
        text-transform: uppercase;
      }
    }
    .checkout-data-column {
      grid-area: columndata;
      grid-column-start: 2;
      grid-row: auto;
      width: 100%;
      overflow: hidden;
      background: $tp-checkout-checkout-data-column-background;
      padding: $tp-checkout-padding;
    }
    .checkout-data-row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      column-gap: $tp-checkout-row-gap;
      margin-bottom: $tp-checkout-row-gap;
      row-gap: $tp-checkout-row-gap;
      > :not(.default-width) {
        flex: 1;
        width: 100%;
      }
      .search {
        flex-grow: 0.5;
        .input-wrapper, .co-icon {
          background-color: $tp-default-background;
        }
      }
      co-transaction-header-delivery-method {
        max-width: $tp-checkout-transaction-delivery-method-carousel-max-width;
        .co-carousel {
          .carousel-navigate-button {
            &.right {
              right: $tp-checkout-transaction-delivery-method-carousel-button-right;
            }
            .carousel-navigate-button-wrapper {
              width: $tp-checkout-transaction-delivery-method-carousel-button-size;
              height: $tp-checkout-transaction-delivery-method-carousel-button-size;
              box-shadow: $tp-checkout-transaction-delivery-method-carousel-button-shadow;
              svg {
                width: $tp-checkout-transaction-delivery-method-carousel-button-svg-size;
                height: $tp-checkout-transaction-delivery-method-carousel-button-svg-size;
              }
            }
          }
        }
      }
      .collapsible-header-start, .collapsible-header-end {
        align-items: center;
      }
      .co-transaction-header-definitive {
        margin: $tp-checkout-transaction-header-definitive-margin;
      }
      .co-radio-button {
        border-width: $cc-radio-button-border-width;
      }
    }
    .collapseable {
      overflow: hidden;
    }
    .two-column-grid {
      display: grid;
      grid-template-areas: "firstcolumn secondcolumn";
      .first-column {
        grid-area: firstcolumn;
        grid-row: auto;
      }
      .second-column {
        grid-area: secondcolumn;
        grid-row: auto;
      }
    }
    .relation-address-new {
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-weight: bold;
      .relation-address-icon {
        height: 20px;
        width: 20px;
      }
    }
    .overview-delivery-invoice-address {
      overflow: hidden;
    }
    .co-carousel {
      .carousel-wrapper {
        padding: 10px 0;
        .co-tile-wrapper {
          width: $tp-checkout-co-carousel-tile-width;
          height: $tp-checkout-co-carousel-tile-height;
          min-height: $tp-checkout-co-carousel-tile-min-height;
          max-height: $tp-checkout-co-carousel-tile-max-height;
          padding: $tp-checkout-co-carousel-tile-padding;
          .co-tile-content-wrapper {
            justify-content: start;
          }
        }
      }
    }
    .co-payment {
      background: $tp-checkout-co-payment-background;
      padding: $tp-checkout-co-payment-padding;
      display: block;
    }
    .co-relation-contact-option {
      .co-input-text {
        flex-basis: 100%;
      }
    }
  }
  @media screen and (max-width: 1024px) {
    .co-checkout {
      .co-stepper-content-wrapper {
        flex-direction: column;
        gap: 30px;
      }
      .co-stepper-step {
        max-width: 100%;
      }
      .co-checkout-right-panel {
        max-width: 100%;
      }
    }
  }
  @media screen and (max-width: 600px) {
    .co-checkout {
      .co-payment {
        .payment-to-pay-wrapper {
          display: flex;
          flex-direction: column;
        }
      }
    }
  }
}