// -------------------------------------
// Variables
//

// Assume small screens are the base
@large: ~"(min-width: 768px)";

// -------------------------------------
// Imports
//

@import '../styles/variables';
@import '../styles/mixins';
@import './containers/color-palette';
@import './containers/landing-page';
@import './containers/icons';

// -------------------------------------
// Globals
//
//
html {
	font-family: @fontFamily;
	-ms-text-size-adjust: 100%; /* 2 */
	-webkit-text-size-adjust: 100%; /* 2 */
	box-sizing: border-box;
}

body {
	margin: 0;
}

pre code {
	font-family: monospace;
	tab-size: 2; // This does not work in IE, I can live with that
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

a {
	color: @color-linkColor;

	&:hover {
		color: @color-linkColorHover;
	}
}

// -------------------------------------
// Component
//

.Component {
	padding: @size-L;

	&-table-wrapper {
		max-width: 100%;
		overflow: auto;
	}

	&-examples {
		list-style: none;
		padding-left: 0;
	}

	&-examples-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	&-props-table {
		p {
			margin: 5px 0;
		}

		td {
			padding: 2px 7px;
		}
	}

	&-made-from {
		font-size: 14px;
	}
}

// -------------------------------------
// App
//

.App {
	@sidebar-width: 215px;

	&-sidebar {
		background-color: @color-white;
		border-bottom: 1px solid @color-gray;

		@media @large {
			width: @sidebar-width;
			overflow: auto;
			height: 100vh;
			position: fixed;
			left: 0;
			border-bottom: initial;
			border-right: 1px solid @color-gray;
			z-index: 1;
		}

		// Little fix for scroll bars
		.lucid-VerticalListMenu-Item-expander {
			margin-right: 10px;
		}
	}

	&-sidebar-container {
		padding: 0 @size-L @size-S @size-L;
	}

	&-sidebar-search > .lucid-ContextMenu {
		// TODO: this is a hack because autocomplete can't handle 100% width
		// correctly when used in the sidebar
		width: 184px;
	}

	&-pages {
		border-bottom: 1px solid @color-gray;
	}

	&-body {
		max-width: 100%;

		@media @large {
			padding-left: @sidebar-width;
		}
	}
}