@import "../../../style/mixin";

@include export-module('cc-transaction-line-side-panel-planning-layout') {

  .co-transaction-line-side-panel-planning {
    .wrapper {
      padding: 1em;
      .delivery-method-wrapper {
        .methods-wrapper {
          padding: 1em;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .method {
            &.selected {
              border: 2px solid $planning-lsp-method-selected-color;
            }
            padding: 0.5em 1em;
            height: 100px;
            display: flex;
            flex-direction: row;
            .radio-wrapper {
              display: flex;
              justify-content: center;
              align-items: center;
              co-input-radio-button {
                .outer-circle {
                  border-color: $planning-lsp-radio-color;

                  .inner-circle {
                    background-color: $planning-lsp-radio-color;
                  }
                }
              }
            }
            .body-wrapper {
              width: 75%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: 1em;

              .body-text {
                text-align: center;
              }
            }
          }
        }
      }
      .send-button-wrapper {
        display: flex;
        width: 100%;
        justify-content: start;
        padding: 1em;
        co-button {
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0 0 0 2em;
          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;
      }
      &.line-side-planning {
        position: relative;
        .co-delivery-planning {
          .co-delivery-planning-main {
            .co-delivery-planning-overview {
              .delivery-overview-wrapper {
                position: unset;
                .tile-view-modes {
                  right: 30px;
                  top: 30px;
                  .co-icon {
                    width: 30px;
                    height: 30px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}