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


:host {
  display: contents;
}

.stat-tile {

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

  .caption {
    margin-bottom: var(--zn-spacing-x-small);
    font-size: var(--zn-font-size-medium);
  }

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

  .left {
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
  }

  .right {
    flex-basis: 50%;
  }

  .amount {
    color: rgb(var(--zn-text-heading));
    font-weight: 600;
    font-size: var(--zn-font-size-x-large);
    line-height: var(--zn-line-height-loose);
    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));
    }
  }

  &--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));
  }

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

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