@use "./mixins";

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

    &__body {
      @include mixins.tile-body;
    }

    &:not(.tile--action) .tile__body {
      @include mixins.tile-body-icon-ratio;
    }

    &--compact .tile__body {
      @include mixins.tile-body-compact;
    }

    &--action {
      @include mixins.tile-action-shell;

      .tile__body {
        @include mixins.tile-action;
      }

      .tile__body
        > .icon:last-child:not(
          .icon--small,
          .icon--medium,
          .icon--large,
          .icon--xlarge,
          .icon--xxlarge,
          .icon--huge
        ) {
        @include mixins.tile-action-icon;
      }
    }
  }
}