@use "./mixins";
@use "../../../styles/tokens/breakpoint";
@use "../../../styles/tokens/space";

@layer components {
  .card {
    @include mixins.card-base;

    &__section {
      @include mixins.card-section(null);
      @include mixins.card-section-actions;

      &--space-small {
        @include mixins.card-section(space.get());
      }

      &--space-large {
        @include breakpoint.get("lg") {
          padding: space.get("xlarge");
        }
      }

      &--fill {
        @include mixins.card-section-fill;
      }
    }

    &__product {
      &-header {
        display: flex;
        justify-content: space-between;

        > img {
          @include mixins.card-product-image;
        }
      }

      &-content {
        @include mixins.card-product-header(null);
      }
    }

    &__product-header--space-small &__product-content {
      @include mixins.card-product-header(space.get());
    }

    &--no-border {
      border: none;
    }
  }
}