.bk-library-dialog-list {
  @apply grid gap-20 mt-20;
  @container (min-width: 700px) {
    @apply grid-cols-2;
  }

  > li {
    @apply border cursor-pointer rounded overflow-hidden;
    .bk-blokkli-item-label {
      @apply font-semibold pointer-events-none;
    }

    @media not all and (hover: none) {
      &:not(.bk-is-selected):hover {
        @apply border-mono-400;
        .bk-library-list-item-header {
          @apply bg-mono-200;
        }
      }
    }

    &.bk-is-selected {
      @apply border-accent-700;
      .bk-library-list-item-header {
        @apply bg-accent-700 text-white;
      }
      .bk-blokkli-item-label-icon {
        @apply bg-accent-900 border-accent-500 text-accent-100;
      }
      .bk-blokkli-item-label {
        @apply text-white;
      }
    }
  }
}
.bk-library-list-item-header {
  @apply p-15 bg-mono-100;

  h3 {
    @apply font-semibold;
  }
}

.bk-library-list-item-inner {
  @apply p-20 max-h-[250px] overflow-hidden relative;

  &:after {
    content: '';
    @apply absolute bottom-0 left-0 w-full h-20;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), white 40%);
  }
}

.bk-library-dialog-content {
  @apply relative;
}

.bk-reusable-dialog-form {
  .bk-info-box {
    @apply my-20;
  }
}

.bk-library-dialog {
  @apply p-20;
}

.bk.bk-library-edit-overlay {
  @apply fixed top-50 left-0 w-screen bottom-0 flex flex-col z-library-edit-dialog;

  iframe {
    @apply absolute top-0 left-0 w-full h-full;
  }
}

.bk.bk-library-edit-overlay-header {
  @apply h-50 bg-lime-normal;
  @apply flex items-center;
  @apply fixed top-0 left-0 w-full z-library-edit-dialog;

  h2 {
    @apply font-bold text-black/60 text-base leading-none px-25;

    span:nth-child(2) {
      @apply font-normal;
    }
  }

  > button {
    @apply h-50 flex items-center px-10 gap-10 font-semibold leading-none;
    @apply text-lime-light hover:bg-lime-dark/30;
    @apply text-black/60;
    @apply ml-auto;

    svg {
      @apply size-20 fill-current;
    }
  }
}

.bk-use-animations {
  .bk-library-edit-header-enter-active,
  .bk-library-edit-header-leave-active {
    @apply transition duration-300 ease-swing;
  }
  .bk-library-edit-header-enter-from,
  .bk-library-edit-header-leave-to {
    @apply -translate-y-full;
  }
}
