@use 'sass:map';
@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;

$content-spacing: (
  'm': (
    'gap': base.$sn-primitive-dimension-8,
    'padding': base.$sn-primitive-dimension-16,
  ),
  's': (
    'gap': base.$sn-primitive-dimension-4,
    'padding': base.$sn-primitive-dimension-8,
  ),
);

.content {
  position: relative;

  display: flex;
  flex-direction: column;

  box-sizing: border-box;
  width: 100%;
}

.title {
  color: base.$sn-theme-color-available-version-textMain;
}

.description {
  color: base.$sn-theme-color-available-version-textSecondary;
}

.promoBadge {
  position: absolute;
  z-index: 1;
  top: base.$sn-primitive-dimension-4;
  right: base.$sn-primitive-dimension-4;
}

.root {
  box-sizing: border-box;
  text-decoration: none;

  @each $size, $spacing in $content-spacing {
    &[data-size='#{$size}'] {
      .content {
        gap: map.get($spacing, 'gap');
        padding: map.get($spacing, 'padding');
      }
    }
  }
}