@include export-module('co-transaction-button-layout') {
  .co-transaction-button {
    font-size: $tp-transaction-button-font-size;
    font-weight: $tp-transaction-button-font-weight;
    display: flex;
    align-items: center;
    height: $tp-transaction-button-height;
    cursor: pointer;
    .transaction-button-icon-wrapper {
      display: flex;
      height: 100%;
      flex-shrink: 0;
      align-items: center;

      .co-icon {
        height: 100%;
        width: auto;
        aspect-ratio: 1;
        svg {
          height: $tp-transaction-button-icon-size;
          width: $tp-transaction-button-icon-size;
        }
      }

      .spacer {
        height: 100%;
        min-width: $tp-transaction-button-icon-spacer-width;
        background-color: $tp-color-border;
      }
    }
    .transaction-button-label-title-wrapper {
      display: flex;
      flex-basis: 100%;
      overflow: hidden;
      flex-direction: column;
      padding: $tp-transaction-button-label-title-wrapper-padding;
      &.title {
        flex-direction: column;
        row-gap: $tp-transaction-button-label-title-wrapper-row-gap;
      }

      .transaction-button-title {
        color: $tp-transaction-button-title-color;

        &.positive {
          color: $tp-transaction-button-title-color-positive;
        }

        &.negative {
          color: $tp-transaction-button-title-color-negative;
        }
      }
    }
    &:not(.no-border) {
      border: $tp-transaction-button-border;
      border-color: $tp-transaction-button-border-color;
      border-radius: $tp-transaction-button-radius;
      background-color: $tp-transaction-button-background-color;
    }
    &:not(.custom-width) {
      width: $tp-transaction-default-button-width;
      &.big {
        width: $tp-transaction-default-button-width-big;
      }
      &.full-width {
        width: 100%;
      }
    }
    &.center-align {
      .transaction-button-label-title-wrapper {
        justify-content: center;
      }
    }
    &.discount {
      text-align: right;
      span {
        color: $tp-color-negative-value;
      }
    }
    &.read-only, &.force-read-only {
      cursor: default;
      pointer-events: none;
    }
    &.no-gap {
      .transaction-button-label-title-wrapper {
        gap: 0;
        row-gap: 0;
      }
    }
  }
}