@use "../../../styles/tools/generate";
@use "../../../styles/tokens/breakpoint";
@use "./config";
@use "./mixins";

@layer components {
  .cover {
    @include mixins.base;

    @each $size, $values in config.$sizes {
      &#{generate.variant-name($size)} {
        @include mixins.content-size($size);
      }
    }

    &__content {
      @include mixins.content-base;

      @include mixins.content-spacing;
    }

    &__image {
      @include mixins.image;

      @each $position, $values in config.$positions {
        &#{generate.variant-name($position)} {
          @include mixins.image-position($position);
        }
      }
    }
  }
}