.analytics-summary-card {
  background-color: var(
    --wds-color-fill-surface-default,
    var(--wsr-color-D80, #ffffff)
  );
  position: relative;
  min-width: 154px;
  border-radius: var(--wds-border-radius-surface-default, 12px);
  box-shadow: 0 var(--wds-shadow-y-350, 10px) var(--wds-shadow-blur-800, 18px) 0
    var(--wds-color-black-100-transparent-10, rgba(19, 23, 32, 0.1));
  padding-block: var(--wds-space-300, 12px);
  padding-inline: var(--wds-space-300, 12px);

  &#{&}--border {
    border: 1px solid
      var(--wds-color-border-standard-secondary-hover, #a8caff);
  }

  @media (hover: hover) {
    &#{&}--clickable#{&}--border:hover {
      border: 1px solid var(--wds-color-border-dark-secondary-hover, #dedede);
    }
  }

  &#{&}--horizontal-padding-small {
    padding-inline: var(--wds-space-300, 12px);
  }

  &#{&}--horizontal-padding-medium {
    padding-inline: var(--wds-space-400, 16px);
  }

  &#{&}--horizontal-padding-large {
    padding-inline: var(--wds-space-500, 20px);
  }

  &#{&}--clickable#{&}--hovered {
    background-color: var(
      --wds-color-fill-dark-secondary,
      var(--wsr-color-B60, #f4f7ff)
    );
    cursor: pointer;
  }

  &__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wds-space-300, 12px);
  }

  &__text-container {
    display: flex;
    flex-direction: column;
    gap: var(--wds-space-300, 12px);
  }

  &__title {
    display: inline-block;
  }

  &__value-row {
    display: flex;
    align-items: center;
    gap: var(--wds-space-300, 12px);
  }

  &__loader {
    position: absolute;
    z-index: 2;
    right: var(--wds-space-200, 12px);
    top: var(--wds-space-200, 12px);
  }

  &__cta-button {
    position: absolute;
    right: var(--wds-space-200, 12px);
    top: var(--wds-space-200, 12px);
    z-index: 1;
  }

  &__footer {
    margin-top: 6px;
  }
}