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

@include export-module('co-transaction-header-relation-layout') {
  .co-transaction-header-relation {
    display: flex;
    .transaction-header-relation-dialog {
      .co-transaction-header-block {
        padding: 4px 0;
        .transaction-header-block-content {
          .transaction-header-block-content-first, .transaction-header-block-content-second {
            flex-basis: 50%;
          }
        }
      }
      .dialog-header-caption {
        padding: 0;
        border-width: 0;
      }
      .co-transaction-filter-categories {
        .transaction-filter-category {
          flex-basis: 50%;
        }
      }
    }
    .extended-block-wrapper {
      display: grid;
      grid-template-columns: 50% 50%;
      grid-column-gap: 10px;
      grid-row-gap: 10px;
      @include screen-mobile {
        grid-template-columns: 100%;
      }
    }
    .header-relation-section {
      display: flex;
      flex-direction: column;
      row-gap: $tp-transaction-header-popup-section-row-gap;
      margin: $tp-transaction-header-popup-section-margin;
      padding: $tp-transaction-header-popup-section-padding;
      border-style: $tp-transaction-header-popup-section-border-style;
      border-width: $tp-transaction-header-popup-section-border-width;
      border-color: black;
      &.general {
        max-width: $tp-transaction-header-popup-section-general-max-width;
      }
    }
    .header-relation-section-label {
      font-family: $tp-transaction-header-popup-section-label-font-family;
      font-size: $tp-transaction-header-popup-section-label-font-size;
      font-weight: $tp-transaction-header-popup-section-label-font-weight;
      margin: $tp-transaction-header-popup-section-label-margin;
    }
    .co-transaction-filter-categories .transaction-filter-categories-wrapper {
      justify-content: flex-start;
    }
    .header-relation-navigation-wrapper {
      display: flex;
      overflow: hidden;
      scroll-behavior: smooth;
    }
    .header-relation-navigation-content {
      display: flex;
      flex-direction: column;
      width: 100%;
      flex-shrink: 0;
    }
    .co-dialog:not(.is-mobile) .co-dialog-wrapper {
      max-height: 80vh;
    }
    .relation-header {
      .transaction-header-block-content {
        align-items: flex-start;
        gap: $tp-co-transaction-header-relation-content-gap;
        padding: $tp-co-transaction-header-relation-content-padding;
        position: relative;
        cursor: pointer;
        justify-content: flex-start;
      }
      .no-relation-yet {
        position: relative;
        left: $tp-co-transaction-header-relation-content-empty;
        .co-button {
          border-style: solid;
          border-width: 1px;
          border-color: $tp-co-transaction-header-relation-content-empty-color;
          color: $tp-co-transaction-header-relation-content-empty-color;
          background-color: transparent;
        }
      }
      .no-relation {
        position: relative;
        left: $tp-co-transaction-header-relation-content-empty;
        .no-relation-label {
          font-weight: bold;
          font-size: $tp-font-size-big;
        }
      }
      .transaction-relation-icon {
        position: absolute;
        left: $tp-co-transaction-header-relation-content-icon-left;
        top: $tp-co-transaction-header-relation-content-icon-top;
        cursor: pointer;
        .transaction-relation-avatar {
          width: $tp-co-transaction-header-relation-content-icon-avatar-size;
          height: $tp-co-transaction-header-relation-content-icon-avatar-size;
          background-color:  $tp-co-transaction-header-relation-content-icon-avatar-background !important;
          svg {
            text {
              fill: $tp-co-transaction-header-relation-content-icon-avatar-text-color;
              font-weight: 600;
            }
          }
        }
      }
      .header-relation-content {
        line-height: $tp-co-transaction-header-relation-content-line-height;
        margin: $tp-co-transaction-header-relation-content-margin;
        max-width: $tp-co-transaction-header-relation-content-max-width;
        overflow: hidden;
        gap: 0;
        .header-relation-name {
          margin: $tp-co-transaction-header-relation-content-name-margin;
        }
        .header-relation-email {
          margin: $tp-co-transaction-header-relation-content-email-margin;
        }
        .text-overflow, .co-transaction-header-contact .transaction-header-contact-value {
          max-height: $tp-co-transaction-header-relation-content-line-height;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          font-size: 11px;
        }
        .header-block-label {
          margin: $tp-co-transaction-header-relation-label-margin;
          display: block;
          position: unset;
          background: transparent;
          padding: 0;
        }
        .header-relation-double {
          display: flex;
          gap: 5px;
        }
      }
    }
    .co-transaction-header-block {
      padding: 4px 60px 4px 4px;
    }
  }
}