@layer ui-reset, ui;

/* flow */
@layer ui {
  .flex {
    display: flex;
  }

  .flex-col {
    flex-direction: column;
    display: flex;
  }

  .flex-center {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .flex-center-x {
    justify-content: center;
    display: flex;
  }

  .flex-center-y {
    align-items: center;
    display: flex;
  }

  .flex-col-center {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .flex-col-center-x {
    flex-direction: column;
    align-items: center;
    display: flex;
  }

  .flex-col-center-y {
    flex-direction: column;
    justify-content: center;
    display: flex;
  }

  .grid {
    display: grid;
  }

  .gap-1 {
    gap: var(--ui-spacing-1);
  }

  .gap-2 {
    gap: var(--ui-spacing-2);
  }

  .gap-3 {
    gap: var(--ui-spacing-3);
  }

  .gap-4 {
    gap: var(--ui-spacing-4);
  }

  .gap-5 {
    gap: var(--ui-spacing-5);
  }

  .gap-6 {
    gap: var(--ui-spacing-6);
  }

  .gap-7 {
    gap: var(--ui-spacing-7);
  }

  .gap-8 {
    gap: var(--ui-spacing-8);
  }
}