$o-typography-is-silent: false;
@import 'o-typography/main';

$padding-unit-base: 8px;
$padding-unit-double: $padding-unit-base * 2;

@import 'palette';
@import 'placeholder-selectors';

.list-unstyled {
	list-style: none;
	margin: 0;
	padding: 0;
}

.connection-map {
	background-color: getColor(athens-gray-light);
	height: 100%;
	width: 100%;

	@include oTypographySans();
	box-sizing: border-box;

	position: relative;

	display: flex;

	body {
		padding: 0;
		margin: 0;
		background-color: transparent;
	}

	* {
		box-sizing: border-box;
	}

	&__content {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
	}

	&__map-container {
		flex: 1;
		display: flex;
		height: 100%;
		overflow: hidden;
	}

	&__root {
		flex: 0 0 260px;
		display: flex;
		flex-direction: column;
		padding: $padding-unit-base 0 $padding-unit-base $padding-unit-base;
		.display-company {
			display: block;
		}
	}

	&__parents {
		padding-top: $padding-unit-double;
		flex: 1 1 auto;
		overflow: auto;
		.display-company {
			margin-bottom: $padding-unit-base * 2;
		}
	}

	&__map {
		flex: 1;
		min-width: 0;
		height: 100%;
		position: relative;
		padding: $padding-unit-base;

		&--error-msg {
			display: block;
			width: 260px;
			margin: $padding-unit-double auto;
			padding: $padding-unit-base;
			border-radius: $padding-unit-base;
			text-align: center;
			@include oTypographySans(0);
			color: getColor(white);
			background-color: getColor(monza);
		}
	}

	&__map-scroll {
		position: absolute;
		top: $padding-unit-base;
		left: $padding-unit-base;
		overflow: auto;
		width: calc(100% - #{$padding-unit-double});
		height: calc(100% - #{$padding-unit-double});
	}

	&__svg {
		background-color: getColor(athens-gray-light);
		padding: 0;
		width: 100%;
		height: 100%;
	}

	.competitors {
	}

	// SVG

	.foreign-object {
		body {
			margin: 0;
			padding: 0;
		}
	}

	// Slightly different from render app version hence repetition here...
	.country-code-thumb {
		font-size: 12px;
		line-height: 14px;
		font-weight: 500;
		padding: ($padding-unit-base / 4) ($padding-unit-base / 2);
		display: inline-block;
		text-align: center;
		background-color: getColor(iron);
		color: getColor(shuttle-gray);
		border-radius: $padding-unit-base / 4;
		&--active {
			background-color: getColor(shuttle-gray);
			color: getColor(white);
		}
	}

	.controls {
		position: absolute;
		top: 20px;
		right: 20px;
		padding: $padding-unit-base;
		background-color: #fff;
		border: 1px solid getColor(iron);
	}

	.header-section {
		padding: 0 $padding-unit-double * 4;
		background-color: getColor(blue-light);
		flex: 0 0 auto;

		.header-label {
			@include oTypographySans(0);
			color: getColor(teal-darker);
			padding: $padding-unit-double 0 $padding-unit-base;
		}

		.subheader {
			padding: 0 0 $padding-unit-double;
			@include oTypographySans(4);
			font-weight: 600;
		}
	}

	.connections-tabs-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		background-color: getColor(athens-gray-light);

		.connections-tabs__tabs {
			flex: 0 0 57px;
		}

		.connections-tabs__content {
			flex: 1 0 auto;
			position: relative;

			.connections-tabs__content-inner {
				position: absolute;
				width: 100%;
				height: 100%;
			}
		}
	}

	.connections-tabs {
		&__tabs {
			border-bottom: 1px solid getColor(iron);
			padding: 0 $padding-unit-double 0 260px + $padding-unit-base;
		}

		&__tab {
			@include oTypographySans($scale: 0, $line-height: 20px);
			display: inline-block;
			padding: $padding-unit-double $padding-unit-double * 2;
			color: getColor(tundora);
			cursor: pointer;
			text-transform: uppercase;
			&:hover {
				border-bottom: 4px solid getColor(iron);
			}
			&--active {
				color: getColor(teal-darker);
				border-bottom: 4px solid getColor(teal-darker);
			}
		}

		&__content {
			min-height: 500px;
			background-color: getColor(athens-gray-light);
			border-top: solid 1px getColor(iron);
		}

		.section {
			margin: 0;
		}
	}

	@import 'root-company-card';
	@import 'sidebar';
}

@import 'subsidiary-company-card';