@mixin card-content-max-height($height) {
  max-height: $height;
  tems-division {
    max-height: $height;
  }
}

:host {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: 100%;
  height: fit-content;
}

article {
  border-radius: var(--border-radius-lg);
  border: var(--border-width-sm) solid var(--color-border-primary);
  width: 100%;
  display: flex;
  font-family: var(--font-family-body);
  &.vertical {
    min-width: 295px;
    .card-content {
      max-height: 180px;
      tems-division {
        max-height: 180px;
      }
    }
  }
  &.horizontal,
  &.billImage {
    header {
      width: auto;
      border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
    }
    header.image {
      flex-shrink: 0;
      width: 33%;
      height: 100%;
    }
    main {
      flex-grow: 1;
      .card-content {
        max-height: 78px;
        tems-division {
          max-height: 78px;
        }
      }
    }
  }
  &.billImage {
    header.image {
      width: 50%;
    }
    .card-content {
      max-height: 206px;
      tems-division {
        max-height: 206px;
      }
    }
  }
  header {
    display: flex;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    box-sizing: border-box;
    width: 100%;
    padding: 16px;
  }
  main {
    display: flex;
    flex-direction: column;
    gap: var(--scale-400);
    flex: 1;
    .content {
      flex: 1;
    }
    .orgLogo {
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      width: 48px;
      height: 48px;
    }
    .card-content {
      flex-grow: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }
    .address-line {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: end;
      width: 100%;
      > div:first-child {
        flex: 1;
        display: flex;
        gap: 16px;
        flex-direction: column;
      }
    }
    .lang-date {
      width: fit-content;
      display: flex;
      gap: 24px;
      flex-direction: row;
      color: var(--color-text-disabled-on);
      font-size: var(--typography-size-body-sm);

      font-weight: var(--font-weight-regular);
      line-height: var(--line-height-body-sm);
      text-transform: uppercase;
    }
    .address,
    .source-logo {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--scale-200);
      color: var(--color-text-information);
      font-size: var(--typography-size-body-sm);
      font-style: normal;
      font-weight: var(--font-weight-regular);
      line-height: var(--line-height-body-sm);
      text-decoration: underline;
      a {
        color: var(--color-text-information);
      }
      svg {
        color: var(--color-text-information);
        width: var(--icon-size-sm);
        height: var(--icon-size-sm);
        display: flex;
      }
      .source,
      .logo {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--scale-200);
      }
      // logo image in source block
      .logo {
        margin-left: auto;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
        width: 76px;
        height: 24px;
      }
    }
  }
  .tags,
  .action {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--scale-200);
  }
  .action ::slotted(*) {
    width: 100%;
    padding: var(--scale-400);
    border-top: var(--border-width-sm) solid var(--color-border-primary);
  }
  .action slot:not(:has-slotted) {
    display: none;
  }

  &.vertical {
    flex-direction: column;
    header {
      width: 100%;
      border-bottom: var(--border-width-sm) solid var(--color-border-primary);
      border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
      &.image {
        height: 167px;
      }
    }
    main {
      padding: var(--scale-600);
      padding-bottom: var(--scale-800);
    }
    
  }

  &.vertical,
  &.billImage {
    .lang-date {
      width: 100%;
      justify-content: space-between;
    }
  }

  &.horizontal,
  &.billImage {
    
    main {
      padding: var(--scale-600);
      padding-bottom: var(--scale-800);
      

      .source-logo .logo {
        margin-left: 0px;
      }
    }
  }
  div:has(slot:not(:has-slotted)) {
    display: none;
  }
}