@reference "tailwindcss";

.dialog__overlay {
    @apply fixed;
    @apply inset-0;
    @apply z-50;
    @apply bg-gray-600/20;
    /* @apply bg-opacity-20; */
    @apply backdrop-blur-sm;
    animation: overlayHide 250ms ease 100ms forwards;
}

.dialog__overlay[data-expanded] {
    animation: overlayShow 250ms ease;
}

.dialog__positioner {
    @apply fixed;
    @apply inset-0;
    @apply z-50;
    @apply flex;
    @apply items-center;
    @apply justify-center;
}

.dialog__content {
    @apply z-50;
    @apply md:min-w-[500px] md:min-h-max w-[calc(100%-2px)] md:w-auto max-h-[calc(100svh-2px)];
    @apply overflow-y-auto;
    background-color: rgb(var(--sm-secondary-background));
    border: 1px solid hsl(240 5% 84%);
    border-radius: 6px;
    padding: 16px;
    box-shadow:
        0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1);
    animation: contentHide 300ms ease-in forwards;
}

.dialog__content[data-expanded] {
    animation: contentShow 300ms ease-out;
}

.dialog__header {
    @apply flex;
    @apply items-baseline;
    @apply justify-between;
    @apply mb-4;
}

.dialog__close-button {
    height: 16px;
    width: 16px;
    float: right;
    cursor: pointer;
}

.dialog__title {
    @apply text-lg;
    @apply font-semibold;
    color: rgb(var(--sm-secondary-foreground));
}

.dialog__description {
}

@keyframes overlayShow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes overlayHide {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
