@use "../../tokens/color" as *;
@use "../../tokens/font" as *;
@use "../../tokens/spacing" as *;
@use "../../base/mixins";

.iati-data-card {
  color: $color-teal-90;
  background-color: $color-teal-20;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-width: 297px;
  text-align: center;

  &--header {
    color: $color-grey-90;
    background-color: $color-teal-40;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    text-align: center;

    &-dark {
      background-color: $color-teal-90;
      color: white;
    }
  }

  &--body {
    color: $color-teal-90;
    background-color: $color-teal-20;
    padding: 1.25rem;
    padding-top: $padding-block;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;

    & :first-child {
      margin-top: 0;
    }

    & :last-child {
      margin-bottom: 0;
    }
  }

  &--wide {
    max-width: 100%;
  }

  &__title {
    margin: 0;
    font-family: $font-stack-heading;
    font-weight: $font-weight-body-xstrong;
    font-size: 1rem;
    text-transform: uppercase;
  }

  &__tagline {
    margin: 0;
    font-size: 0.9rem;
    font-weight: $font-weight-body-xstrong;
    line-height: 1.4;
  }

  &__stats {
    display: flex;
    gap: 0.5rem;
    margin: 0.5rem 0;
    flex-wrap: wrap;
    justify-content: center;
  }

  &__stat {
    display: grid;
    background-color: $color-teal-10;
    padding: 0.75rem;
    gap: 0.5rem;
    min-width: 0;
    width: min-content;

    &:not(:only-child) {
      max-width: calc(50% - 0.25rem);
    }

    &-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      font-weight: $font-weight-body-xstrong;
      letter-spacing: 0.5px;
    }

    &-value {
      font-family: $font-stack-heading;
      font-weight: $font-weight-heading;
      font-size: 1.5rem;
      color: $color-teal-90;
      margin: 0;
      align-self: end;
    }
  }

  &--columns {
    display: flex;
    gap: 0.5rem;
  }

  &--left,
  &--right {
    align-content: start;
    column-gap: 1rem;
    display: grid;
    flex: 1;
    grid-template-columns: auto 1fr;
    row-gap: 0.5rem;
  }

  &--column {
    font-size: 0.75rem;
    line-height: 2;
    text-align: left;

    &-title {
      color: $color-grey-90;
      font-size: 0.75rem;
      font-family: $font-stack-heading;
      font-weight: $font-weight-heading;
      text-transform: uppercase;
    }
  }

  &__graph {
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 53.5px;
    margin: auto;
  }

  &__caption {
    font-size: 0.75rem;
    font-weight: $font-weight-body-xxstrong;
    text-transform: uppercase;
  }

  &__button {
    margin-top: 1rem;
  }
}