[data-component='FileSharing'] {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	
	> .sharing-toolbar {
		> .share-file {
			cursor: pointer;
			width: 100%;
			background: #aef;
			padding: 1rem;
			border-radius: 1vmin;
			box-shadow: 0vmin 0vmin 1vmin 0vmin rgba(17,17,17,0.5);

			&.disabled {
				cursor: not-allowed;
			}
		}
	}

	> .shared-files {
		flex-grow: 1;
		overflow-y: auto;
		margin-top: 0.5rem;

		> .file-entry {
			background-color: rgba(0,0,0,0.1);
			border-radius: 5px;
			width: 100%;
			padding: 0.5rem;
			display: flex;

			&:not(:first-child) {
				margin-top: 0.5rem;
			}
			
			&:last-child {
				margin-bottom: 1.5rem;
			}

			> .file-avatar {
				height: 2rem;
				border-radius: 50%;
			}

			> .file-content {
				flex-grow: 1;
				padding-left: 0.5rem;

				> p:not(:first-child) {
					margin-top: 0.5rem;
				}

				> .file-info {
					display: flex;
					padding-top: 0.5rem;
					align-items: center;
					
					> .button {
						display: flex;
						justify-content: center;
						align-items: center;
						cursor: pointer;
						background: #252525;
						border: 1px solid #151515;
						padding: 0.3rem;
						border-bottom: 5px solid #151515;
						border-radius: 3px 3px 0 0;
					}

					> p {
						flex-grow: 1;
						padding-left: 0.5rem;
					}
				}
			}
		}

		> .empty {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding-top: 20vmin;

			> p {
				padding: 6px 12px;
				border-radius: 6px;
				user-select: none;
				pointer-events: none;
				font-size: 20px;
				color: #000;
			}
		}
	}
}

#holding-overlay {
	display: none;
}

.drag #holding-overlay {
	display: flex;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.6);
	color: #FFF;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	z-index: 3000;
}