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

@include export-module('cc-transaction-quick-access-order-confirmation-layout') {
  .co-transaction-quick-access-order-confirmation .quick-access-wrapper {
    .confirm-inputs,
    .show-confirmation-inputs-wrapper {
      display: flex;
      column-gap: 10px;
      align-items: center;

      .field-form {
        display: flex;
        flex-direction: row;
        column-gap: 10px;
        align-items: center;
      }

      .new-confirmation-button {
        height: 30px;
        color: $tp-color-action;

        .co-icon {
          svg,
          & [fill] { // for fontawesome icons
            fill: $tp-color-action;
          }
        }
      }

      .co-input-checkbox {
        margin-left: 10px;
      }

      .co-input-date {
        min-width: 170px;
      }

      .invalid {
        background-color: #ffe6e6;

        .co-input-text {
          background-color: #ffe6e6;
        }
      }
    }

    .error-message {
      padding: 2px 0 0 10px;
      font-weight: bold;
      color: #fe4400;
    }
  }
}