@layer components {
  [data-coco][data-component="spacer"] {
    @apply pointer-events-none select-none invisible !p-0 !m-0 !border-none !flex-none;

    &[data-size="0"] {
      @apply hidden;
    }

    @apply !w-0;

    &:not([data-scale-from]) {
      @apply spacer-vertical-xs;
    }

    &[data-scale-from="sm"] {
      @apply spacer-vertical-sm;
    }

    &[data-scale-from="md"] {
      @apply spacer-vertical-md;
    }

    &[data-scale-from="lg"] {
      @apply spacer-vertical-lg;
    }

    @media screen(sm) {
      &:not([data-scale-from]),
      &[data-scale-from="sm"] {
        @apply spacer-vertical-sm;
      }

      &[data-scale-from="md"] {
        @apply spacer-vertical-md;
      }

      &[data-scale-from="lg"] {
        @apply spacer-vertical-lg;
      }
    }

    @media screen(md) {
      &:not([data-scale-from]),
      &[data-scale-from="sm"],
      &[data-scale-from="md"] {
        @apply spacer-vertical-md;
      }

      &[data-scale-from="lg"] {
        @apply spacer-vertical-lg;
      }
    }

    @media screen(lg) {
      &:not([data-scale-from]),
      &[data-scale-from="sm"],
      &[data-scale-from="md"],
      &[data-scale-from="lg"] {
        @apply spacer-vertical-lg;
      }
    }
  }
}

@layer utilities {
  .spacer-vertical-xs {
    &[data-size="1"] {
      @apply h-1.5;
    }

    &[data-size="2"] {
      @apply h-3;
    }

    &[data-size="3"] {
      @apply h-5;
    }

    &[data-size="4"] {
      @apply h-7;
    }

    &[data-size="5"] {
      @apply h-9;
    }

    &[data-size="6"] {
      @apply h-11;
    }

    &[data-size="7"] {
      @apply h-13;
    }

    &[data-size="8"] {
      @apply h-15;
    }
  }

  .spacer-vertical-sm {
    &[data-size="1"] {
      @apply h-2;
    }

    &[data-size="2"] {
      @apply h-4;
    }

    &[data-size="3"] {
      @apply h-6;
    }

    &[data-size="4"] {
      @apply h-8;
    }

    &[data-size="5"] {
      @apply h-10;
    }

    &[data-size="6"] {
      @apply h-12;
    }

    &[data-size="7"] {
      @apply h-14;
    }

    &[data-size="8"] {
      @apply h-16;
    }
  }

  .spacer-vertical-md {
    &[data-size="1"] {
      @apply h-4;
    }

    &[data-size="2"] {
      @apply h-6;
    }

    &[data-size="3"] {
      @apply h-8;
    }

    &[data-size="4"] {
      @apply h-10;
    }

    &[data-size="5"] {
      @apply h-12;
    }

    &[data-size="6"] {
      @apply h-14;
    }

    &[data-size="7"] {
      @apply h-16;
    }

    &[data-size="8"] {
      @apply h-18;
    }
  }

  .spacer-vertical-lg {
    &[data-size="1"] {
      @apply h-6;
    }

    &[data-size="2"] {
      @apply h-8;
    }

    &[data-size="3"] {
      @apply h-10;
    }

    &[data-size="4"] {
      @apply h-12;
    }

    &[data-size="5"] {
      @apply h-14;
    }

    &[data-size="6"] {
      @apply h-16;
    }

    &[data-size="7"] {
      @apply h-18;
    }

    &[data-size="8"] {
      @apply h-20;
    }
  }
}