:root {
  --ui-container: var(--breakpoint-2xl);
}

/* Container padding */
@utility px-container {
  @apply px-4 sm:px-6 lg:px-8;
}

/* Container sizes */
@utility container {
  @apply mx-auto max-w-(--breakpoint-2xl) px-container;
}
@utility container-xl {
  @apply container max-w-(--breakpoint-xl);
}
@utility container-lg {
  @apply container max-w-(--breakpoint-lg);
}
@utility container-md {
  @apply container max-w-(--breakpoint-md);
}
@utility container-sm {
  @apply container max-w-(--breakpoint-sm);
}
@utility container-fluid {
  @apply container max-w-screen;
}
@utility container-none {
  @apply w-full max-w-screen;
}

/* Split containers */
:root {
  --container-outside-margin: 0;
  --container-width: 100vw;
  @variant sm {
    --container-outside-margin: calc(50vw - theme("screens.sm") / 2);
    --container-width: theme("screens.sm");
  }
  @variant md {
    --container-outside-margin: calc(50vw - theme("screens.md") / 2);
    --container-width: theme("screens.md");
  }
  @variant lg {
    --container-outside-margin: calc(50vw - theme("screens.lg") / 2);
    --container-width: theme("screens.lg");
  }
  @variant xl {
    --container-outside-margin: calc(50vw - theme("screens.xl") / 2);
    --container-width: theme("screens.xl");
  }
  @variant 2xl {
    --container-outside-margin: calc(50vw - theme("screens.2xl") / 2);
    --container-width: theme("screens.2xl");
  }
}

@utility container-left {
  @apply ml-(--container-outside-margin) px-container;
}
@utility container-right {
  @apply mr-(--container-outside-margin) px-container;
}
@utility container-half {
  width: calc(var(--container-width) / 2);
}