.svg-map-wrapper {
	position: relative;
	width: 100%;
	padding-top: 50%;
	overflow: hidden;
	background: $oceanColor;
	color: $textColor;
	* {
		box-sizing: border-box;
	}
	 :focus:not(:focus-visible) {
		outline: 0;
	}
	.svg-map-image {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin: 0;
	}
	// Controls
	.svg-map-controls-wrapper {
		position: absolute;
		bottom: 10px;
		left: 10px;
		z-index: 1;
		display: flex;
		overflow: hidden;
		border-radius: 2px;
		box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
	}
	.svg-map-controls-zoom,
	.svg-map-controls-move {
		display: flex;
		margin-right: 5px;
		overflow: hidden;
		background: #fff;
		&:last-child {
			margin-right: 0;
		}
	}
	.svg-map-control-button {
		background-color: transparent;
		border: none;
		border-radius: 0;
		color: inherit;
		font: inherit;
		line-height: inherit;
		margin: 0;
		padding: 0;
		overflow: visible;
		text-transform: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		cursor: pointer;
		width: 30px;
		height: 30px;
		position: relative;
		&.svg-map-zoom-button {
			&:before,
			&:after {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background: #666;
				transition: background-color 0.2s;
			}
			&:before {
				width: 11px;
				height: 3px;
			}
			&:hover {
				&:before,
				&:after {
					background: $textColor;
				}
			}
			&.svg-map-disabled {
				&:before,
				&:after {
					background: #ccc;
				}
			}
		}
		&.svg-map-zoom-in-button {
			margin: 1px 0 1px 1px;
			&:after {
				width: 3px;
				height: 11px;
			}
		}
		&.svg-map-zoom-out-button {
			margin: 1px 1px 1px 0;
		}
	}
	// Countries
	.svg-map-country {
		cursor: pointer;
		stroke: #fff;
		stroke-width: 1;
		stroke-linejoin: round;
		vector-effect: non-scaling-stroke;
		transition: fill 0.2s, stroke 0.2s;
		&:hover,
		&.svg-map-active {
			stroke: $mapActiveStrokeColor;
		}
		&.svg-map-active {
			stroke-width: $mapActiveStrokeWidth;
		}
	}
}