@spaced-out/ui-design-system/lib/components/BadgedIcon/BadgedIcon.module.css

Sense UI components library

@value (colorBackgroundTertiary) from '../../styles/variables/_color.css';

@value (
  size42,
  size34,
  size60,
  size8,
  size12,
  size2,
  size4
) from '../../styles/variables/_size.css';

@value (
  borderRadiusMedium,
  borderRadiusCircle
) from '../../styles/variables/_border.css';

@value (
  motionEaseInEaseOut,
  motionDurationSlow
) from '../../styles/variables/_motion.css';

@value (
  spaceNone,
  spaceMedium,
  spaceXSmall
) from '../../styles/variables/_space.css';

.iconContainer {
  display: flex;
  width: fit-content;
  min-width: size34;
  min-height: size34;
  justify-content: center;
  align-items: center;
  border-radius: borderRadiusMedium;
  position: relative;
  background: linear-gradient(
      91deg,
      rgba(204, 192, 240, 0.5) 0%,
      rgba(178, 209, 250, 0.5) 100%
    ),
    colorBackgroundTertiary;
}

.medium {
  width: size42;
  height: size42;
}

.small {
  width: size34;
  height: size34;
}

.large {
  width: size60;
  height: size60;
}

.iconContainer:hover .badgeIcon {
  transform: rotate(-90deg);
}

.badgeIcon {
  position: absolute;
  border-radius: borderRadiusCircle;
  top: calc(size2 * -1);
  right: calc(size4 * -1);
  transition: transform motionDurationSlow motionEaseInEaseOut;
}

.small .badgeIcon {
  width: size8;
  height: size8;
  left: calc(spaceMedium + spaceXSmall);
  top: spaceNone;
}

.medium .badgeIcon {
  width: size12;
  height: size12;
}

.large .badgeIcon {
  width: size12;
  height: size12;
}