@layer global, library, page, component;

@layer global {

	/* make content always fill entire screen */
	/* with no padding or margin */
	html,
	body {
		margin: 0;
		padding: 0;
		min-height: 100vh;
	}

	body {
		display: flex;
		flex-direction: column;

		>header {
			background-color: var(--grey-100);
			padding: 1rem 1.5rem;
			display: grid;
			grid-auto-flow: column;
			grid-template-columns: min-content;
			gap: 0.5rem;
			align-items: center;

			>img {
				height: 2rem;
			}

			div.buttons {
				justify-self: end;
				display: flex;
				align-items: center;
				gap: 1rem;

				button,
				a {
					display: flex;
					align-items: center;
					gap: 0.25rem;
				}
			}
		}

		>main {
			flex: 1;
			display: flex;

			>aside {
				color: var(--grey-600);
				background-color: var(--grey-100);
				padding: 1rem 1.5rem;
				display: flex;
				flex-direction: column;
				gap: 0.5rem;

				svg {
					height: 1.5rem;
					color: var(--grey-500);
				}

				>button {
					width: fit-content;
					align-self: flex-end;
					border-radius: 0.5rem;
					transform: rotate(180deg);
					transition: transform 250ms;
				}

				>a {
					display: flex;
					gap: 0.5rem;
					align-items: center;
					padding: 0.5rem 1rem;
					border-radius: 0.5rem;
					transition: background-color 250ms;


					>span {
						text-transform: capitalize;
						padding-right: 2rem;
					}
				}


				>a:hover,
				>button:hover {
					cursor: pointer;
					background-color: var(--grey-200);
				}

			}

			>aside.hidden {

				>button {
					align-self: center;
					transform: rotate(0deg);
				}

				a span {
					display: none;
				}
			}

			>#main {
				flex: 1;

				div.pagination {
					width: fit-content;
					margin: auto;
					padding: 0.5rem;
					display: flex;
					gap: 2rem;
					align-items: center;
				}
			}
		}

		>footer {
			color: var(--grey-600);
			background-color: var(--grey-100);
			text-align: center;
			padding: 0.5rem;
		}
	}

	a {
		text-decoration: none;
		color: inherit;
	}
}