.bk-clipboard {
  .bk-clipboard-list {
    > div {
      @apply cursor-grab;
      @apply border-b border-b-mono-300;
      @apply hover:bg-mono-50;
    }
  }
  .bk-clipboard-info {
    h4 {
      @apply !text-base !font-bold !font-sans leading-none;
    }
    p {
      @apply !font-sans !text-sm mt-10;
    }
  }
}

.bk-clipboard-item {
  @apply !relative !rounded !font-sans;
  @apply hover:border-mono-500;

  > * {
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.bk-clipboard-item-image {
  img {
    @apply block aspect-[4/3] object-cover;
  }
}
.bk-clipboard-item-video {
  @apply relative aspect-video overflow-hidden border border-mono-300;
  @apply bg-mono-900 text-mono-50;
  img {
    @apply block object-cover absolute top-0 left-0 w-full h-full;
  }

  > div {
    @apply absolute z-30 left-0 w-full bottom-0 p-10;
    @apply bg-gradient-to-b from-mono-900/0 to-mono-900;
    svg {
      @apply size-20 fill-current;
    }

    p {
      @apply text-xs;
    }

    > div {
      @apply flex gap-5 font-bold;
    }
  }
}

.bk-clipboard-item-file {
  @apply aspect-[210/297] bg-white shadow-lg border border-mono-200 flex flex-col;
  @apply p-10;

  h3 {
    @apply font-bold text-lg;
  }

  ul {
    @apply flex gap-5 text-sm pt-10 border-t border-t-mono-200 mt-5 leading-none;
  }

  .bk-clipboard-item-file-lines {
    @apply grid gap-10 mb-auto;

    > div {
      @apply bg-mono-200 h-15;

      &:first-child {
        @apply h-30;
      }
    }
  }
}

.bk.bk-clipboard-item-header {
  @apply !flex !items-center !gap-10 !text-lg !font-semibold mb-15;
  button {
    @apply !ml-auto !text-lg !p-5 !rounded text-mono-900 bg-mono-200;
    @apply hover:bg-accent-700 hover:text-white;
    svg {
      @apply !w-20 !h-20 !fill-current;
    }
  }
}
.bk-clipboard-item-inner {
  @apply !relative !h-full !line-clamp-6 !font-sans !text-base;
}

.bk-clipboard-form {
  @apply flex gap-5 overflow-hidden;
  .bk-clipboard-input {
    @apply flex-1 min-w-0;
    input {
      @apply w-full h-50;
    }
  }

  .bk-clipboard-upload {
    @apply relative flex-grow-0;

    input {
      @apply appearance-none absolute top-0 left-0 w-full h-full opacity-0;
    }

    .bk-button {
      @apply !p-0 aspect-square;
    }
  }
}

.bk-clipboard-item-box {
  @apply bg-mono-100 aspect-video flex items-center justify-center flex-col border border-mono-200;
  @apply rounded;

  h3 {
    @apply font-bold;
  }

  svg {
    @apply size-100 fill-accent-600;
  }
}
