.main {
	display: flex;
	flex-wrap: nowrap;
	align-items: start;
	width: 100%;
	height: 100vh;
	padding: 2.5%;

	&Nav {
		overflow-y: auto;
		padding: $border-radius;
		width: 17%;
		margin-right: 40px;
	}

	&Page {
		overflow-y: auto;
		padding: $border-radius-b;
		width: calc(83% - 40px);
		align-self: stretch;
	}
}

.filesWithEditor {
	display: grid;
	grid-template-areas: "filterFiles fileTitle" "files codeEditor" "filesActions editorActions";
	grid-gap: 20px;
	height: 100%;
	max-height: 100%;
	min-height: 10%;
	grid-template-rows: 30px auto 30px;
	grid-template-columns: 30% auto;

	& .filterFiles {
		grid-area: filterFiles
	}

	& .fileTitle {
		grid-area: fileTitle
	}

	& .files {
		grid-area: files;
		display: block;
		min-height: 10%;

		& .confFile {
			padding: 4% 6%;
			margin-bottom: 3%;
		}
	}

	& .codeEditor {
		grid-area: codeEditor;

		& .textarea {
			height: 100%;
		}
	}

	& .filesActions {
		grid-area: filesActions
	}

	& .editorActions {
		grid-area: editorActions
	}
}

.files {

	&List {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		height: 100%;
		min-height: 10%;
		width: 100%;
		padding: 8%;
		overflow-y: auto;
	}
}