/*
 * Tilde Friends core stylesheet
 * This is a prototype; things may change based on feedback.
 *
 * This Software is an external library that is part of
 * Tilde Friends and is shared under the MIT license.
 *
 * Inject this file in your app at tildefriends.css
 * and use this tag to import it:
 * <link rel="stylesheet" href="tildefriends.css"/>
 *
 * Revision 0 / 2024 M02 19
 */

body {
	color: white;
	font-family: sans-serif;
}

button,
.button,
input[type='button'],
input[type='submit'],
select {
	border: none;
	border-radius: 8px;
	padding: 8px 12px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 4px;

	&.red {
		background-color: #bd1e24;
		color: white;
	}

	&.green {
		background-color: #18922d;
		color: white;
	}

	&.blue {
		background-color: #0067a7;
		color: white;
	}

	&.yellow {
		background-color: #ee9600;
		color: black;
	}

	&:hover {
		filter: brightness(0.75);
	}
}

a:link {
	color: #268bd2;
}

a:visited {
	color: #6c71c4;
}

a:hover {
	color: #859900;
}

a:active {
	color: #2aa198;
}

table {
	border-collapse: collapse;
	width: 100%;
}

td,
th {
	border: 1px solid #ffffff40;
	text-align: left;
	padding: 8px;
}

tr:nth-child(even) {
	background-color: #ffffff20;
}

.flex {
	display: flex;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.flex-row {
	display: flex;
	flex-direction: row;
}

.inline-flex-row {
	display: inline-flex;
	flex-direction: row;
}

.box {
	background-color: #00000020;
	border: 1px solid grey;
	border-radius: 8px;
	padding: 16px;
	margin: 4px;
}