@include export-module('cc-transaction-header-block-layout') {
  .co-transaction-header-block {
    font-family: $tp-transaction-header-block-font-family;
    font-size: $tp-transaction-header-block-font-size;
    display: flex;
    flex-direction: column;
    min-width: $tp-transaction-header-block-width;
    padding: $tp-transaction-header-block-padding;
    margin: $tp-transaction-header-block-margin;
    overflow: hidden;
    border: $tp-transaction-header-block-border;
    border-width: $tp-transaction-header-block-border-width;
    line-height: $tp-transaction-header-block-line-height;
    border-radius: $tp-transaction-header-block-border-radius;
    &.extended-showing {
      border-width: $tp-transaction-header-block-border-width $tp-transaction-header-block-border-width 0 $tp-transaction-header-block-border-width;
      border-radius: $tp-transaction-header-block-border-radius $tp-transaction-header-block-border-radius 0 0;
      z-index: 100;
    }
    &.no-pointer {
      pointer-events: none;
      cursor: initial;
    }
    .transaction-header-block-header {
      font-family: $tp-transaction-header-block-label-font-family;
      display: flex;
      flex-direction: row;
      align-items: center;
      column-gap: 10px;
      margin: $tp-transaction-header-block-header-margin;
      justify-content: space-between;
      min-height: $tp-transaction-header-block-header-min-height;
      .header-block-label {
        font-size: $tp-transaction-header-block-label-font-size;
        font-weight: $tp-transaction-header-block-label-font-weight;
      }
    }
    .transaction-header-content {
      display: flex;
      column-gap: 10px;
    }
    .transaction-header-block-content {
      display: flex;
      justify-content: space-between;
      flex-basis: 1px;
      column-gap: $tp-transaction-header-block-content-column-gap;
      align-items: center;
      .transaction-header-block-content-first {
        //min-width: 130px;
      }
      .transaction-header-block-content-second {
        //min-width: 130px;
      }
      .transaction-header-block-content-third {
        //min-width: 130px;
      }
      .transaction-header-block-content-hidden {
        padding: $tp-transaction-header-block-icon-padding;
      }
      .transaction-header-block-row {
        display: flex;
        justify-content: space-between;
        flex-basis: 1px;
        column-gap: $tp-transaction-header-block-content-row-gap;
        line-height: $tp-transaction-header-order-section-line-height;
        align-items: center;

      }
      .transaction-header-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: $tp-transaction-header-block-icon-background-width;
        height: $tp-transaction-header-block-icon-background-height;
        background: $tp-default-background-accent;
        border-radius: $tp-transaction-header-block-icon-background-radius;
        cursor: pointer;
        .co-icon {
          width: $tp-transaction-header-block-icon-width;
          height: $tp-transaction-header-block-icon-height;
        }
      }
    }
    .transaction-header-block-divider {
      height: 70%;
      width: 1px;
      align-self: center;
    }
    .transaction-header-extended-dots {
      cursor: pointer;
      display: flex;
      align-items: flex-end;
      height: 0;
      font-size: 20px;
      font-weight: bold;
      user-selection: none;
      transform: rotate(90deg);
    }
    .transaction-header-extended-wrapper {
      position: absolute;
      overflow: hidden;
      transform-origin: top left;
      padding: $tp-transaction-header-block-padding;
      border: $tp-transaction-header-block-border;
      border-width: $tp-transaction-header-block-border-width;
      border-radius: 0 $tp-transaction-header-block-border-radius $tp-transaction-header-block-border-radius;
    }
  }
}
