@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';

$sizes: 's', 'm', 'l';

.titleLayout {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  
  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include styles-tokens-card.composite-var(styles-tokens-card.$card, 'content', $size, 'header');
    }
  }
}

.contentLayout {
  overflow: hidden;
  display: block;
  max-width: 100%;
}

.title {
  display: block;
  max-width: 100%;
  color: styles-tokens-card.$sys-neutral-text-main;
}

.metadata {
  max-width: 100%;
  color: styles-tokens-card.$sys-neutral-text-light;
}

.description {
  max-width: 100%;
  color: styles-tokens-card.$sys-neutral-text-support;
}