@include export-module('cc-transaction-quick-access-planning-popup-layout') {
  .co-transaction-quick-access-planning-popup {

    .wrapper {
      padding: 1em;

      .delivery-method-wrapper {
        .methods-wrapper {
          padding: 1em 0;
          display: flex;
          flex-direction: row;
          gap: 10px;
          .method {
            &.selected {
              border: 2px solid $planning-lsp-method-selected-color;
            }
            padding: 0.5em 1em;
            height: 100px;
            width: 150px;
            display: flex;
            flex-direction: row;
            position: relative;
            background: #FFF;
            .radio-wrapper {
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              top: 10px;
              left: 10px;

              co-input-radio-button {
                .outer-circle {
                  border-color: $planning-lsp-radio-color;

                  .inner-circle {
                    background-color: $planning-lsp-radio-color;
                  }
                }
              }
            }

            .body-wrapper {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: 1em;

              .body-text {
                text-align: center;
                font-size: 10px;
              }
              .no-image-wrapper {
                font-size: 8px;
                max-height: 40px;
                gap: 5px;
                .co-icon {
                  height: 20px;
                  width: 20px;
                }
              }
            }
          }
        }
      }

      .send-button-wrapper {
        display: flex;
        width: 100%;
        justify-content: start;
        padding: 1em;

        co-button {
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0;
          width: 16em;
          color: $planning-lsp-send-button-text-color;
          background-color: $planning-lsp-send-button-color;
        }

      }

      .header-info-wrapper {
        display: flex;
        flex-direction: row;
        gap: 1em;

        .block {
          padding: 1em;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 0.5em;

          .header {
            text-align: center;
            color: $planning-lsp-header-text-color;
          }

          .text {
            text-align: center;
          }
        }
      }

      .track-and-trace-header {
        padding: 1em;
        font-weight: bold;
        font-size: 12px;
      }

      .track-and-trace-body-wrapper {
        .code-wrapper {
          display: flex;
          flex-direction: row;
          gap: 1em;
        }

        display: flex;
        gap: 0.5em;
        flex-direction: column;
        padding: 1em;
      }
    }
    a.link {
      color: $color-action;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
