@custom-variant ios (@media ios);
@custom-variant android (@media android);
@custom-variant web (@supports selector(div > div));
@custom-variant native (@media native);
@custom-variant tv (@media tv);
@custom-variant android-tv (@media android-tv);
@custom-variant apple-tv (@media apple-tv);

@utility h-screen-safe {
    height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
}

@utility m-safe {
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
    margin-left: env(safe-area-inset-left);
    margin-right: env(safe-area-inset-right);
}

@utility m-safe-or-* {
    margin-top: max(env(safe-area-inset-top), --spacing(--value(integer)));
    margin-top: max(env(safe-area-inset-top), --value([length], --spacing-*));
    margin-bottom: max(env(safe-area-inset-bottom), --spacing(--value(integer)));
    margin-bottom: max(env(safe-area-inset-bottom), --value([length], --spacing-*));
    margin-left: max(env(safe-area-inset-left), --spacing(--value(integer)));
    margin-left: max(env(safe-area-inset-left), --value([length], --spacing-*));
    margin-right: max(env(safe-area-inset-right), --spacing(--value(integer)));
    margin-right: max(env(safe-area-inset-right), --value([length], --spacing-*));
}

@utility m-safe-offset-* {
    margin-top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
    margin-top: calc(env(safe-area-inset-top) + --value([length], --spacing-*));
    margin-bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
    margin-bottom: calc(env(safe-area-inset-bottom) + --value([length], --spacing-*));
    margin-left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
    margin-left: calc(env(safe-area-inset-left) + --value([length], --spacing-*));
    margin-right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
    margin-right: calc(env(safe-area-inset-right) + --value([length], --spacing-*));
}

@utility mx-safe {
    margin-left: env(safe-area-inset-left);
    margin-right: env(safe-area-inset-right);
}

@utility mx-safe-or-* {
    margin-left: max(env(safe-area-inset-left), --spacing(--value(integer)));
    margin-left: max(env(safe-area-inset-left), --value([length], --spacing-*));
    margin-right: max(env(safe-area-inset-right), --spacing(--value(integer)));
    margin-right: max(env(safe-area-inset-right), --value([length], --spacing-*));
}

@utility mx-safe-offset-* {
    margin-left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
    margin-left: calc(env(safe-area-inset-left) + --value([length], --spacing-*));
    margin-right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
    margin-right: calc(env(safe-area-inset-right) + --value([length], --spacing-*));
}

@utility my-safe {
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
}

@utility my-safe-or-* {
    margin-top: max(env(safe-area-inset-top), --spacing(--value(integer)));
    margin-top: max(env(safe-area-inset-top), --value([length], --spacing-*));
    margin-bottom: max(env(safe-area-inset-bottom), --spacing(--value(integer)));
    margin-bottom: max(env(safe-area-inset-bottom), --value([length], --spacing-*));
}

@utility my-safe-offset-* {
    margin-top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
    margin-top: calc(env(safe-area-inset-top) + --value([length], --spacing-*));
    margin-bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
    margin-bottom: calc(env(safe-area-inset-bottom) + --value([length], --spacing-*));
}

@utility mt-safe {
    margin-top: env(safe-area-inset-top);
}

@utility mt-safe-or-* {
    margin-top: max(env(safe-area-inset-top), --spacing(--value(integer)));
    margin-top: max(env(safe-area-inset-top), --value([length], --spacing-*));
}

@utility mt-safe-offset-* {
    margin-top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
    margin-top: calc(env(safe-area-inset-top) + --value([length], --spacing-*));
}

@utility mb-safe {
    margin-bottom: env(safe-area-inset-bottom);
}

@utility mb-safe-or-* {
    margin-bottom: max(env(safe-area-inset-bottom), --spacing(--value(integer)));
    margin-bottom: max(env(safe-area-inset-bottom), --value([length], --spacing-*));
}

@utility mb-safe-offset-* {
    margin-bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
    margin-bottom: calc(env(safe-area-inset-bottom) + --value([length], --spacing-*));
}

@utility ml-safe {
    margin-left: env(safe-area-inset-left);
}

@utility ml-safe-or-* {
    margin-left: max(env(safe-area-inset-left), --spacing(--value(integer)));
    margin-left: max(env(safe-area-inset-left), --value([length], --spacing-*));
}

@utility ml-safe-offset-* {
    margin-left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
    margin-left: calc(env(safe-area-inset-left) + --value([length], --spacing-*));
}

@utility mr-safe {
    margin-right: env(safe-area-inset-right);
}

@utility mr-safe-or-* {
    margin-right: max(env(safe-area-inset-right), --spacing(--value(integer)));
    margin-right: max(env(safe-area-inset-right), --value([length], --spacing-*));
}

@utility mr-safe-offset-* {
    margin-right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
    margin-right: calc(env(safe-area-inset-right) + --value([length], --spacing-*));
}

@utility p-safe {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

@utility p-safe-or-* {
    padding-top: max(env(safe-area-inset-top), --spacing(--value(integer)));
    padding-top: max(env(safe-area-inset-top), --value([length], --spacing-*));
    padding-bottom: max(env(safe-area-inset-bottom), --spacing(--value(integer)));
    padding-bottom: max(env(safe-area-inset-bottom), --value([length], --spacing-*));
    padding-left: max(env(safe-area-inset-left), --spacing(--value(integer)));
    padding-left: max(env(safe-area-inset-left), --value([length], --spacing-*));
    padding-right: max(env(safe-area-inset-right), --spacing(--value(integer)));
    padding-right: max(env(safe-area-inset-right), --value([length], --spacing-*));
}

@utility p-safe-offset-* {
    padding-top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
    padding-top: calc(env(safe-area-inset-top) + --value([length], --spacing-*));
    padding-bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
    padding-bottom: calc(env(safe-area-inset-bottom) + --value([length], --spacing-*));
    padding-left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
    padding-left: calc(env(safe-area-inset-left) + --value([length], --spacing-*));
    padding-right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
    padding-right: calc(env(safe-area-inset-right) + --value([length], --spacing-*));
}

@utility px-safe {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

@utility px-safe-or-* {
    padding-left: max(env(safe-area-inset-left), --spacing(--value(integer)));
    padding-left: max(env(safe-area-inset-left), --value([length], --spacing-*));
    padding-right: max(env(safe-area-inset-right), --spacing(--value(integer)));
    padding-right: max(env(safe-area-inset-right), --value([length], --spacing-*));
}

@utility px-safe-offset-* {
    padding-left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
    padding-left: calc(env(safe-area-inset-left) + --value([length], --spacing-*));
    padding-right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
    padding-right: calc(env(safe-area-inset-right) + --value([length], --spacing-*));
}

@utility py-safe {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

@utility py-safe-or-* {
    padding-top: max(env(safe-area-inset-top), --spacing(--value(integer)));
    padding-top: max(env(safe-area-inset-top), --value([length], --spacing-*));
    padding-bottom: max(env(safe-area-inset-bottom), --spacing(--value(integer)));
    padding-bottom: max(env(safe-area-inset-bottom), --value([length], --spacing-*));
}

@utility py-safe-offset-* {
    padding-top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
    padding-top: calc(env(safe-area-inset-top) + --value([length], --spacing-*));
    padding-bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
    padding-bottom: calc(env(safe-area-inset-bottom) + --value([length], --spacing-*));
}

@utility pt-safe {
    padding-top: env(safe-area-inset-top);
}

@utility pt-safe-or-* {
    padding-top: max(env(safe-area-inset-top), --spacing(--value(integer)));
    padding-top: max(env(safe-area-inset-top), --value([length], --spacing-*));
}

@utility pt-safe-offset-* {
    padding-top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
    padding-top: calc(env(safe-area-inset-top) + --value([length], --spacing-*));
}

@utility pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
}

@utility pb-safe-or-* {
    padding-bottom: max(env(safe-area-inset-bottom), --spacing(--value(integer)));
    padding-bottom: max(env(safe-area-inset-bottom), --value([length], --spacing-*));
}

@utility pb-safe-offset-* {
    padding-bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
    padding-bottom: calc(env(safe-area-inset-bottom) + --value([length], --spacing-*));
}

@utility pl-safe {
    padding-left: env(safe-area-inset-left);
}

@utility pl-safe-or-* {
    padding-left: max(env(safe-area-inset-left), --spacing(--value(integer)));
    padding-left: max(env(safe-area-inset-left), --value([length], --spacing-*));
}

@utility pl-safe-offset-* {
    padding-left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
    padding-left: calc(env(safe-area-inset-left) + --value([length], --spacing-*));
}

@utility pr-safe {
    padding-right: env(safe-area-inset-right);
}

@utility pr-safe-or-* {
    padding-right: max(env(safe-area-inset-right), --spacing(--value(integer)));
    padding-right: max(env(safe-area-inset-right), --value([length], --spacing-*));
}

@utility pr-safe-offset-* {
    padding-right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
    padding-right: calc(env(safe-area-inset-right) + --value([length], --spacing-*));
}

@utility inset-safe {
    top: env(safe-area-inset-top);
    bottom: env(safe-area-inset-bottom);
    left: env(safe-area-inset-left);
    right: env(safe-area-inset-right);
}

@utility inset-safe-or-* {
    top: max(env(safe-area-inset-top), --spacing(--value(integer)));
    top: max(env(safe-area-inset-top), --value([length], --spacing-*));
    bottom: max(env(safe-area-inset-bottom), --spacing(--value(integer)));
    bottom: max(env(safe-area-inset-bottom), --value([length], --spacing-*));
    left: max(env(safe-area-inset-left), --spacing(--value(integer)));
    left: max(env(safe-area-inset-left), --value([length], --spacing-*));
    right: max(env(safe-area-inset-right), --spacing(--value(integer)));
    right: max(env(safe-area-inset-right), --value([length], --spacing-*));
}

@utility inset-safe-offset-* {
    top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
    top: calc(env(safe-area-inset-top) + --value([length], --spacing-*));
    bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
    bottom: calc(env(safe-area-inset-bottom) + --value([length], --spacing-*));
    left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
    left: calc(env(safe-area-inset-left) + --value([length], --spacing-*));
    right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
    right: calc(env(safe-area-inset-right) + --value([length], --spacing-*));
}

@utility x-safe {
    left: env(safe-area-inset-left);
    right: env(safe-area-inset-right);
}

@utility x-safe-or-* {
    left: max(env(safe-area-inset-left), --spacing(--value(integer)));
    left: max(env(safe-area-inset-left), --value([length], --spacing-*));
    right: max(env(safe-area-inset-right), --spacing(--value(integer)));
    right: max(env(safe-area-inset-right), --value([length], --spacing-*));
}

@utility x-safe-offset-* {
    left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
    left: calc(env(safe-area-inset-left) + --value([length], --spacing-*));
    right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
    right: calc(env(safe-area-inset-right) + --value([length], --spacing-*));
}

@utility y-safe {
    top: env(safe-area-inset-top);
    bottom: env(safe-area-inset-bottom);
}

@utility y-safe-or-* {
    top: max(env(safe-area-inset-top), --spacing(--value(integer)));
    top: max(env(safe-area-inset-top), --value([length], --spacing-*));
    bottom: max(env(safe-area-inset-bottom), --spacing(--value(integer)));
    bottom: max(env(safe-area-inset-bottom), --value([length], --spacing-*));
}

@utility y-safe-offset-* {
    top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
    top: calc(env(safe-area-inset-top) + --value([length], --spacing-*));
    bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
    bottom: calc(env(safe-area-inset-bottom) + --value([length], --spacing-*));
}

@utility top-safe {
    top: env(safe-area-inset-top);
}

@utility top-safe-or-* {
    top: max(env(safe-area-inset-top), --spacing(--value(integer)));
    top: max(env(safe-area-inset-top), --value([length], --spacing-*));
}

@utility top-safe-offset-* {
    top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
    top: calc(env(safe-area-inset-top) + --value([length], --spacing-*));
}

@utility bottom-safe {
    bottom: env(safe-area-inset-bottom);
}

@utility bottom-safe-or-* {
    bottom: max(env(safe-area-inset-bottom), --spacing(--value(integer)));
    bottom: max(env(safe-area-inset-bottom), --value([length], --spacing-*));
}

@utility bottom-safe-offset-* {
    bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
    bottom: calc(env(safe-area-inset-bottom) + --value([length], --spacing-*));
}

@utility left-safe {
    left: env(safe-area-inset-left);
}

@utility left-safe-or-* {
    left: max(env(safe-area-inset-left), --spacing(--value(integer)));
    left: max(env(safe-area-inset-left), --value([length], --spacing-*));
}

@utility left-safe-offset-* {
    left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
    left: calc(env(safe-area-inset-left) + --value([length], --spacing-*));
}

@utility right-safe {
    right: env(safe-area-inset-right);
}

@utility right-safe-or-* {
    right: max(env(safe-area-inset-right), --spacing(--value(integer)));
    right: max(env(safe-area-inset-right), --value([length], --spacing-*));
}

@utility right-safe-offset-* {
    right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
    right: calc(env(safe-area-inset-right) + --value([length], --spacing-*));
}

@custom-variant disabled {
    &:disabled {
        @slot;
    }

    &[aria-disabled="true"] {
        @slot;
    }

    &[readonly] {
        @slot;
    }
}

@utility border-continuous {
  border-curve: continuous;
}

@utility border-circular {
  border-curve: circular;
}

@custom-variant light {
   &:where(.light, .light *) {
       @slot;
   }

   @media (prefers-color-scheme: light) {
       &:not(:where(.light, .light *, .dark, .dark *)) {
           @slot;
       }
   }
}

@custom-variant dark {
   &:where(.dark, .dark *) {
       @slot;
   }

   @media (prefers-color-scheme: dark) {
       &:not(:where(.light, .light *, .dark, .dark *)) {
           @slot;
       }
   }
}


@theme {
    --color-background: unset;
    --app-foreground: unset;
}