@use '@talend/design-tokens/lib/tokens' as tokens;

:export {
	scaleMinColor: tokens.$coral-color-charts-default-weak; /* stylelint-disable-line property-no-unknown */
	scaleMaxColor: tokens.$coral-color-charts-default-strong; /* stylelint-disable-line property-no-unknown */
}

.geo-chart {
	position: relative;

	&__title {
		text-align: center;
		margin: 8px 0;
	}

	&__feature {
		stroke: tokens.$coral-color-charts-neutral;
		stroke-width: 1px;
		vector-effect: non-scaling-stroke;

		&--disabled {
			fill: tokens.$coral-color-charts-neutral-weak;
		}

		&:not(&--disabled):hover {
			fill: tokens.$coral-color-charts-default !important; /* stylelint-disable-line declaration-no-important */
			cursor: pointer;
		}
	}

	&__zoom {
		position: absolute;
		bottom: 15px;
		left: 10px;
	}

	&__zoom-button {
		display: block;
		background: transparent;
		border: none;
		outline: none;
		padding: 0;
		height: 20px;
		width: 20px;

		& + #{&} {
			margin-top: 5px;
		}
	}

	&__zoom-icon {
		color: tokens.$coral-color-charts-neutral;
		width: 100%;
		height: 100%;

		&:not(:hover) .ti-background {
			color: tokens.$coral-color-charts-neutral;
		}

		&:hover {
			color: tokens.$coral-color-charts-neutral-hover;
		}

		&:active {
			color: tokens.$coral-color-charts-default;
		}
	}
}