@import './button';

.p-drawer {
  @apply pointer-events-auto relative flex flex-col border border-surface-200 bg-surface-0 text-surface-700 shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)] transition-transform duration-300 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-0;
}

.p-drawer {
  @apply [transform:translate3d(0,0,0)];
}

.p-drawer-content {
  @apply flex-grow overflow-y-auto px-5 pb-5 pt-0;
}

.p-drawer-header {
  @apply flex flex-shrink-0 items-center justify-between p-5;
}

.p-drawer-footer {
  @apply p-5;
}

.p-drawer-title {
  @apply text-2xl font-semibold;
}

.p-drawer-full .p-drawer {
  @apply left-0 top-0 h-screen max-h-full w-screen transform-none transition-none;
}

.p-drawer-left .p-drawer-enter-from,
.p-drawer-left .p-drawer-leave-to {
  @apply -translate-x-full;
}

.p-drawer-right .p-drawer-enter-from,
.p-drawer-right .p-drawer-leave-to {
  @apply translate-x-full;
}

.p-drawer-top .p-drawer-enter-from,
.p-drawer-top .p-drawer-leave-to {
  @apply -translate-y-full;
}

.p-drawer-bottom .p-drawer-enter-from,
.p-drawer-bottom .p-drawer-leave-to {
  @apply translate-y-full;
}

.p-drawer-full .p-drawer-enter-from,
.p-drawer-full .p-drawer-leave-to {
  @apply opacity-0;
}

.p-drawer-full .p-drawer-enter-active,
.p-drawer-full .p-drawer-leave-active {
  @apply transition-opacity ease-[cubic-bezier(0.25,0.8,0.25,1)] animate-duration-400;
}

.p-drawer-left .p-drawer {
  @apply h-full w-80 border-r;
}

.p-drawer-right .p-drawer {
  @apply h-full w-80 border-s;
}

.p-drawer-top .p-drawer {
  @apply h-40 w-full border-b;
}

.p-drawer-bottom .p-drawer {
  @apply h-40 w-full border-t;
}

.p-drawer-left .p-drawer-content,
.p-drawer-right .p-drawer-content,
.p-drawer-top .p-drawer-content,
.p-drawer-bottom .p-drawer-content {
  @apply h-full w-full;
}

.p-drawer-open {
  @apply flex;
}

.p-overlay-mask:dir(rtl) {
  @apply flex-row-reverse;
}
