@use 'pix-design-tokens/typography';
@use 'pix-design-tokens/fonts';
@use 'pix-design-tokens/shadows';

.campaign-participation-overview-card {
  display: flex;
  flex-direction: column;
  gap: var(--pix-spacing-8x);
  align-items: flex-start;
  justify-content: space-between;
  height: 290px;
  padding: var(--pix-spacing-4x) var(--pix-spacing-6x);
  background: var(--pix-neutral-0);

  &__header {
    width: 100%;
  }
}

.campaign-participation-overview-card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;


  &__content {
    @extend %pix-body-l;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    max-height: 50px;
    margin-bottom: 12px;
    background-color: var(--pix-neutral-20);
    border-radius: 4px;
  }

  &__action {
    display: block;
  }

  &__archived-and-not-shared {
    margin-bottom: auto;
  }

  &--archived {
    @extend %pix-body-s;

    font-size: 0.75rem;
    text-align: center;
  }
}

.campaign-participation-overview-card-header {
  line-height: normal;

  &__tag {
    @extend %pix-body-xs;

    margin-bottom: var(--pix-spacing-4x);
  }

  &__title {
    @extend %pix-body-m;

    overflow: hidden;
    color: var(--pix-neutral-900);
    font-weight: var(--pix-font-medium);
    font-size: 1.125rem;
    line-height: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__subtitle {
    @extend %pix-body-s;

    display: block;
    margin-top: var(--pix-spacing-2x);
    overflow: hidden;
    color: var(--pix-neutral-500);
    font-weight: var(--pix-font-bold);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__date {
    @extend %pix-body-s;

    color: var(--pix-neutral-500);
  }
}
