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

$modes: 'little', 'middle', 'background';

.image {
  display: block;

  box-sizing: border-box;
  width: 100%;
  height: auto;

  object-fit: cover;

  @each $mode in $modes {
    &[data-mode='#{$mode}'] {
      @if $mode == 'background' {
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        object-fit: cover;

        &[data-fading]{
          -webkit-mask-image: styles-theme-variables.$gradient-linear-mask-90deg;
          mask-image: styles-theme-variables.$gradient-linear-mask-90deg;
        }
      }

      @else {
        @include styles-theme-variables.composite-var(styles-tokens-card.$card, 'image', $mode);
      }
    }
  }
}