@use "../../wc";


:host {
  display: contents;
}

// A box of its own lets zn-cols draw its dividers between value-first stats.
:host([layout="value-first"]) {
  display: block;
}

.stat-tile {

  .caption, .description, .amount, .bottom {
    margin: 0;
  }

  .caption {
    margin-bottom: var(--zn-spacing-x-small);
    font-size: var(--zn-text-chart-minor-font-size);
    line-height: var(--zn-text-chart-minor-line-height);
    font-weight: var(--zn-text-chart-minor-font-weight);
    color: var(--zn-text-chart-minor-color);
  }

  .container {
    display: flex;
    flex-direction: row;
    gap: var(--zn-spacing-medium);
    height: 100%;
  }

  .left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .amount {
    color: var(--zn-text-chart-major-color);
    font-weight: var(--zn-text-chart-major-font-weight);
    font-size: var(--zn-text-chart-major-font-size);
    line-height: var(--zn-text-chart-major-line-height);
    display: flex;
    flex-grow: 1;
    align-items: center;
  }

  .bottom {
    color: rgb(var(--zn-text));
    font-weight: 400;
    padding-top: var(--zn-spacing-medium);
    font-size: var(--zn-font-size-small);

    &:empty {
      display: none;
    }
  }

  .diff {
    .positive {
      color: rgb(var(--zn-color-success));
    }

    .negative {
      color: rgb(var(--zn-color-error));
    }

    .neutral {
      color: rgb(var(--zn-color-warning));
    }
  }

  .value {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }

  .icon {
    margin-left: var(--zn-spacing-x-small);
  }

  &--value-first {
    display: flex;
    flex-direction: column;
    gap: var(--zn-spacing-2x-small);
    color: var(--zn-text-chart-major-color);

    .caption {
      margin-bottom: 0;
    }

    .amount {
      flex-grow: 0;
      flex-wrap: wrap;
      column-gap: var(--zn-spacing-x-small);
      color: inherit;
    }

    .value {
      gap: var(--zn-spacing-x-small);
    }

    .diff {
      font-size: var(--zn-font-size-small);
      font-weight: 400;
      white-space: nowrap;
    }

    .diff .neutral,
    .description {
      color: rgba(var(--zn-color-text), 0.6);
    }

    .description {
      font-size: var(--zn-font-size-x-small);
    }

    .icon {
      margin-left: 0;
    }
  }

  &--padded {
    padding: var(--zn-spacing-large);
  }

  &--large .amount {
    font-size: var(--zn-font-size-3x-large);
    font-weight: var(--zn-font-weight-semibold);
    line-height: 1.15;
  }

  &--chart {
    .amount {
      padding-top: var(--zn-spacing-small);
    }

    .bottom {
      padding-top: var(--zn-spacing-small);
    }
  }

  &--primary {
    color: rgb(var(--zn-primary));
  }

  &--error {
    color: rgb(var(--zn-color-error));
  }

  &--info {
    color: rgb(var(--zn-color-info));
  }

  &--warning {
    color: rgb(var(--zn-color-warning));
  }

  &--success {
    color: rgb(var(--zn-color-success));
  }

  &--neutral {
    color: rgb(var(--zn-text));
  }

  &--value-first.stat-tile--neutral {
    color: var(--zn-text-chart-major-color);
  }

  @container (max-width:550px) {
    ::slotted(.zn-col-1) {
      flex-basis: 170px;
    }

    .amount {
      font-size: 20px;
      line-height: 20px;
      padding-top: 5px;
    }

    &--large .amount {
      font-size: var(--zn-font-size-2x-large);
      line-height: 1.15;
      padding-top: 0;
    }
  }
}