dpot-frontend/app/styles/quill.scss

.ql-editor {
    .file-card {
        position: relative;
        display: block;
        margin: 8px 0;
		border: 1px solid var(--border-default);
        border-radius: 8px;
        padding: 8px;
        background: var(--bg-elevated);
		white-space: initial;
		justify-self: start;
		user-select: auto;
        cursor: grab;

        .file-card-content {
            display: flex;
            flex-direction: column;
            gap: 4px;
			pointer-events: auto;
        }

        .file-card-info {
            font-size: 14px;
            word-break: break-word;
        }

        .file-card-actions {
			z-index: 1;
			position: absolute;
			display: none;
			width: 154px;
			top: 100%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: var(--bg-page);
			border: 1px solid var(--border-strong);
			padding: 4px;
			border-radius: 4px;

            button {
                background: var(--border-default);
                border: none;
                border-radius: 4px;
                padding: 4px 8px;
                cursor: pointer;

                &:hover, &.active {
                    background: #d5d5d5;
                }
            }
        }

		&:hover {
			cursor: grab;
			outline: 1px solid var(--text-muted);
		}

		&.active {
			border: 1px solid var(--color-success);

			.file-card-actions {
				display: flex;
				gap: 0.313rem;
			}
		}
    }
}