examples/menu-dialog-animated/style.css
@import url("../menu/style.css");
@import url("../dialog/style.css");
@import url("../form/style.css");

.button {
  @apply
    gap-2
    flex-none
  ;
}

.badge {
  @apply
    flex
    items-center
    justify-center
    h-5
    px-2
    text-xs
    font-medium
    rounded-full
    bg-blue-50/80
    text-blue-900
  ;
}

.menu {
  @apply
    min-h-min
    overflow-visible
    opacity-0
    [transform:translate3d(0,-16px,0)]
    transition-[opacity,transform]
  ;
}

.menu[data-enter] {
  @apply
    [transform:translate3d(0,0,0)]
    opacity-100
  ;
}

.header {
  @apply
    flex
    justify-between
    items-center
    pb-2
    mb-2
    border-b
    border-gray-250
    dark:border-gray-500
  ;
}

.heading {
  @apply
    text-lg
    font-semibold
    text-black
    dark:text-white
  ;
}

.menu .heading {
  @apply
    text-base
    m-0
    pl-2
  ;
}

.scroller {
  @apply
    overflow-auto
  ;
}

.dialog {
  @apply
    fixed
    top-0
    left-1/2
  ;
}

.dialog:not([data-animated]) {
  @apply
    [transform:translate3d(-50%,64px,0)]
  ;
}

.dialog[data-animated] {
  @apply
    top-0
    opacity-0
    [transform:translate3d(-50%,32px,0)]
    transition-[opacity,transform]
  ;
}

.dialog[data-enter] {
  @apply
    opacity-100
    [transform:translate3d(-50%,64px,0)]
  ;
}

.dialog .heading {
  @apply
    text-2xl
    font-medium
    m-0
  ;
}

.dialog .dismiss {
  @apply
    w-10
    h-10
    p-0
  ;
}

.form {
  @apply
    flex
    flex-col
    gap-4
    min-h-0
    w-auto
    p-0
  ;
}
