@layer components {
    .yst-root {

        .yst-notifications {
            max-width: calc(100vw - 4rem); /* 100vw - top and left of 2rem = 4rem. */
            max-height: calc(100vh - 4rem); /* 100vh - ( top of 2rem * 2 )  = 4rem. */
            @apply yst-fixed yst-w-full yst-z-20 yst-pointer-events-none yst-flex yst-flex-col yst-space-y-4;
        }

        .yst-notifications--bottom-center {
            @apply yst-bottom-8 yst-items-center;
        }

        .yst-notifications--bottom-left {
            @apply yst-bottom-8 yst-left-8;
        }

        .yst-notifications--top-center {
            @apply yst-top-8 yst-items-center;
        }

		.yst-notification--large {
			@apply yst-w-96;
		}

        .yst-notification__icon {
            @apply yst-w-5 yst-h-5;
        }
    }
}
