.mcrm-block {
  @apply relative
  p-6
  gap-x-6
  gap-y-2
  backdrop-blur-lg
  rounded-2xl
  overflow-hidden;

  &::before {
    @apply content-['']
    absolute
    inset-0
    p-px
    rounded-2xl
    size-full
    bg-gradient-to-br
    to-transparent
    z-[-1];

    mask:
      linear-gradient(#000 0 0) exclude,
      linear-gradient(#000 0 0) content-box;
  }

  &.block__light {
    @apply bg-white/20;

    &::before {
      @apply from-white/20;
    }
  }

  &.block__dark {
    @apply bg-slate-900/70;

    &::before {
      @apply from-slate-400/40;
    }
  }

  &.block__primary {
    @apply bg-sky-300/40;

    &::before {
      @apply from-sky-100/40;
    }
  }

  &.block__secondary {
    @apply bg-amber-300/40;

    &::before {
      @apply from-amber-100/40;
    }
  }

  &.block__success {
    @apply bg-emerald-300/40;

    &::before {
      @apply from-emerald-100/40;
    }
  }

  &.block__warning {
    @apply bg-orange-300/40;

    &::before {
      @apply from-orange-100/40;
    }
  }

  &.block__danger {
    @apply bg-rose-300/40;

    &::before {
      @apply from-rose-100/40;
    }
  }

  &.block-spacing__sm,
  &.block-size__sm {
    @apply p-4 gap-x-4 gap-y-2;
  }

  &.block-size__sm {
    @apply rounded-lg;

    &::before {
      @apply rounded-lg;
    }
  }

  &.block-spacing__lg,
  &.block-size__lg {
    @apply p-8 gap-x-8 gap-y-4;
  }

  &.block-size__lg {
    @apply rounded-3xl;

    &::before {
      @apply rounded-3xl;
    }
  }
}
