@import "layout";

a {
	&:hover {
		color: lighten($secondary, 30%);
	}
}

td.actions {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	> *:not(:first-child) {
		margin-left: 8px;
	}

	form {
		padding: 0;
		display: inline;
	}

	button, .button {
		margin: 0;
		padding: 8px;

		.feather {
			margin-right: 0;
		}
	}
}

body > header {
	background: transparent;
	line-height: 16px;

	@include container;
	padding-top: 8px;
	padding-bottom: 8px;
	align-items: center;

	@media (max-width: $mobileThreshold) {
		padding: 0;
	}

	.logo {
		display: flex;
		flex-direction: row;
		align-items: center;
		max-width: 148px;
		padding: 8px;

		font-size: 18px;
		line-height: 18px;

		> img {
			margin: 0 8px 0 0;
			width: initial;
			height: 48px;
			flex-shrink: 0;
		}
	}

	nav {
		ul {
			li {
				margin-left: 8px;

				a, button {
					display: flex;
					flex-direction: row;
					align-items: center;
					height: auto;
					padding: 8px;

					border-radius: 3px;

					.feather {
						--icon-size: 16px;
					}

					.tip {
						position: static;
						display: block;
						visibility: visible;
						height: auto;
						padding: 0 0 0 4px;
						transform: none;
						color: inherit;

						opacity: 1;
						background: transparent;
						text-transform: uppercase;
						font-size: 16px;
						line-height: 16px;
					}
				}

				button {
					margin: 0;
				}
			}
		}
	}
}

body > footer {
	background: transparent;
}