@value (colorFillPrimary, colorNeutralLightest, colorNeutralLight, colorBackgroundTertiary) from '../../styles/variables/_color.css';
@value (spaceXSmall,spaceXXSmall, spaceNone, spaceLarge, spaceMedium, spaceSmall) from '../../styles/variables/_space.css';
@value (sizeFluid, size40, size252) from '../../styles/variables/_size.css';
@value (borderRadiusXSmall, borderRadiusMedium) from '../../styles/variables/_border.css';
@value (opacity20, opacity40, opacity60) from '../../styles/variables/_opacity.css';
@value (motionDurationSlowest) from '../../styles/variables/_motion.css';

@value backgroundSizeInitial: calc(sizeFluid * 2);
@value backgroundSizeFinal: calc(sizeFluid * -2);
@value motionDuration: calc(motionDurationSlowest * 1.5);

.wrapper {
  --width: size40;
  --border-radius: borderRadiusXSmall;
  --height: sizeFluid;
  height: var(--height);
  width: var(--width);
  border-radius: var(--border-radius);
  background: linear-gradient(
    to right,
    colorNeutralLightest opacity20,
    colorNeutralLight opacity40,
    colorNeutralLightest opacity60
  );
  background-size: backgroundSizeInitial sizeFluid;
  animation: shimmer motionDuration infinite linear;
  vertical-align: middle;

  &.text {
    margin-right: spaceXXSmall;
    width: initial;
    padding-left: var(--width);
  }
}

.kpiBox {
  display: flex;
  composes: borderPrimary from '../../styles/border.module.css';
  min-width: size252;
  width: fit-content;
  height: fit-content;
  align-items: center;
  gap: spaceSmall;
  background-color: colorBackgroundTertiary;
  border-radius: borderRadiusMedium;
  padding: spaceLarge spaceMedium;
}

.section {
  display: flex;
  width: sizeFluid;
  flex-flow: column;
  gap: spaceXSmall;
  align-items: center;
}

.iconSection {
  width: initial;
}

@keyframes shimmer {
  from {
    background-position: backgroundSizeInitial spaceNone;
  }
  to {
    background-position: backgroundSizeFinal spaceNone;
  }
}