.ql-editor {
    .file-card {
        position: relative;
        display: block;
        margin: 8px 0;
		border: 1px solid #eee;
        border-radius: 8px;
        padding: 8px;
        background: #fafafa;
		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: #fff;
			border: 1px solid #ccc;
			padding: 4px;
			border-radius: 4px;

            button {
                background: #eee;
                border: none;
                border-radius: 4px;
                padding: 4px 8px;
                cursor: pointer;

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

		&:hover {
			cursor: grab;
			outline: 1px solid #999;
		}

		&.active {
			border: 1px solid #4caf50;

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