@import './button';

.p-speeddial {
  @apply static flex gap-2;
}

.p-speeddial-button {
  @apply z-10;
}

.p-speeddial-button.p-speeddial-rotate {
  @apply will-change-transform [transition:transform_250ms_cubic-bezier(0.4,0,0.2,1)_0ms,background_200ms,color_200ms,border-color_200ms];
}

.p-speeddial-list {
  @apply pointer-events-none z-20 m-0 flex list-none items-center justify-center gap-2 p-0 outline-none transition-[top] duration-200 ease-linear;
}

.p-speeddial-item {
  @apply scale-0 opacity-0 will-change-transform [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1)_0ms,opacity_0.8s];
}

.p-speeddial-circle .p-speeddial-item,
.p-speeddial-semi-circle .p-speeddial-item,
.p-speeddial-quarter-circle .p-speeddial-item {
  @apply absolute;
}

.p-speeddial-mask {
  @apply absolute start-0 top-0 h-full w-full rounded-md bg-white/40 opacity-0 transition-opacity duration-150 dark:bg-white/60;
}

.p-speeddial-mask-visible {
  @apply pointer-events-none opacity-100 transition-opacity duration-150;
}

.p-speeddial-open .p-speeddial-list {
  @apply pointer-events-auto;
}

.p-speeddial-open .p-speeddial-item {
  @apply scale-100 opacity-100;
}

.p-speeddial-open .p-speeddial-rotate {
  @apply rotate-45;
}
