/* * * * * * General settings * * * * * */

/* Make the selected options bold */
.browse-selected-option {
	font-weight: bold;
}

/* Make smaller images */
.browse-icon > img {
	vertical-align: middle;
	max-height:     100px;
	max-width:      100px;
	height:         auto;
	width:          auto;
}

/* Help center things: icons */
.browse-icon-center {
	display:        inline-block;
	height:         100%;
	vertical-align: middle;
}

/* Color by row */
.browse-row-odd {
	background-color: lightblue;
}
.browse-row-even {
	background-color: lightgray;
}
/* */

/* For debugging purposes, color by columns instead of rows * /
.browse-icon {
	background-color: red;
}
.browse-name {
	background-color: yellow;
}
.browse-size {
	background-color: cyan;
}
.browse-date {
	background-color: lime;
}
/* */

/* * * * * * Landscape settings * * * * * */

@media screen and (orientation:landscape) {

	/* Grid layout and horizontal padding */
	.browse-grid {
		display:               grid;
		grid-auto-flow:        dense;
		grid-template-columns: max-content 1fr max-content max-content;
	}
	.browse-icon {
		grid-column:  1;
		text-align:   center;
		padding-left: 5px;
	}
	.browse-name {
		padding-left:  10px;
		overflow-wrap: anywhere;
	}
	.browse-name-dir {
		grid-column: 2 / 4;
	}
	.browse-name-file {
		grid-column: 2;
	}
	.browse-size {
		grid-column:  3;
		padding-left: 20px;
	}
	.browse-date {
		grid-column:  4;
		padding-left: 20px;
	}

	/* Give each row a bit of vertical padding */
	.browse-row {
		padding-top:    1px;
		padding-bottom: 1px;
	}

	/* Help center things: text */
	.browse-text-center {
		height:      100%;
		display:     flex;
		align-items: center;
	}
}

/* * * * * * Portrait settings * * * * * */

@media screen and (orientation:portrait)  {

	/* Grid layout and horizontal padding */
	.browse-grid {
		display:               grid;
		grid-auto-flow:        dense;
		grid-template-columns: auto auto min-content;
		grid-auto-rows:        auto auto;
	}
	.browse-icon {
		grid-column:  1;
		padding-left: 5px;
	}
	.browse-size {
		grid-column:  2;
		white-space:  nowrap;
		text-align:   left;
		padding-left: 20px;
	}
	.browse-date {
		white-space:  nowrap;
		text-align:   right;
		padding-left: 20px;
	}
	.browse-date-dir {
		grid-column: 2 / 4;
	}
	.browse-date-file {
		grid-column: 3;
	}
	.browse-name {
		grid-column: 1 / 4;
		overflow-wrap: anywhere;
	}

	/* Give each row a bit of vertical padding */
	.browse-row {
		padding-top:    10px;
		padding-bottom: 10px;
	}
}