:root {
  --dialog-z-index: 100;
}

.c-dialog {
  @apply fixed
  left-1/2 top-1/2
  z-[--dialog-z-index]
  w-auto min-w-[25%] max-w-[800px] rounded-lg bg-elevate p-14 leading-6 text-gray-500-400 shadow;
  transform: translate(-50%, -50%);

  &-overlay {
    @apply fixed
    inset-0 z-[--dialog-z-index]
    bg-overlay;
  }

  &-icon-wrapper {
    @apply flex h-[44px] w-[44px]  min-w-[44px] items-center justify-center rounded-lg bg-gray-50-900 p-[5px];
  }

  &-icon {
    @apply my-1 shrink-0;
  }

  &-title {
    @apply m-0 font-serif text-xl font-bold text-gray;
  }

  &-description {
    @apply mb-5 mt-1 text-sm font-medium;
  }

  &-close-button {
    @apply absolute right-0 top-0 inline-flex h-12 w-12 items-center justify-center rounded-none rounded-tr-lg border !bg-transparent !p-0 !drop-shadow-none hover:!bg-gray-50-900 focus:!bg-gray-50-900;
  }

  &-with-icon {
    @apply flex items-start gap-6 pl-6;
  }

  &-content {
    &__buttons {
      @apply mt-4 flex items-center justify-end gap-4;
    }
  }
}
