@import './../../vendor/carbon-components/scss/globals/scss/vars';
@import './../../vendor/@carbon/themes/scss/tokens';
@import './../../vendor/@carbon/layout/scss/spacing';
@import './../../vendor/@carbon/type/scss/font-face/sans';
@import './../../vendor/@carbon/elements/scss/import-once/import-once';
@import './../../vendor/carbon-components/scss/globals/scss/_helper-mixins';

@include exports('cc-shape-node') {
	.#{$prefix}--#{$charts-prefix}--shape-node {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: $ui-01;
		box-sizing: border-box;
		font-family: carbon--font-family('sans');
		width: 100%;
		height: 100%;
		position: relative;
	}

	.#{$prefix}--#{$charts-prefix}--shape-node--circle {
		border-radius: 100%;
	}

	.#{$prefix}--#{$charts-prefix}--shape-node--square {
		border-radius: 0;
	}

	.#{$prefix}--#{$charts-prefix}--shape-node--rounded-square {
		border-radius: carbon--mini-units(1);
	}

	.#{$prefix}--#{$charts-prefix}--shape-node--a,
	.#{$prefix}--#{$charts-prefix}--shape-node--button {
		border: none;
		color: inherit;
		text-decoration: none;
		cursor: pointer;
	}

	.#{$prefix}--#{$charts-prefix}--shape-node--button {
		font-family: carbon--font-family('sans');
		text-align: left;
		width: 100%;
	}

	.#{$prefix}--#{$charts-prefix}--shape-node--a:focus,
	.#{$prefix}--#{$charts-prefix}--shape-node--a:hover,
	.#{$prefix}--#{$charts-prefix}--shape-node--button:focus,
	.#{$prefix}--#{$charts-prefix}--shape-node--button:hover {
		background-color: $hover-ui;

		.#{$prefix}--#{$charts-prefix}--shape-node__title,
		.#{$prefix}--#{$charts-prefix}--shape-node__subtitle {
			font-weight: carbon--font-weight('semibold');
		}
	}

	.#{$prefix}--#{$charts-prefix}--shape-node--a:focus,
	.#{$prefix}--#{$charts-prefix}--shape-node--button:focus {
		&:focus {
			outline: none;
			box-shadow: 0 0 0 2px $focus;
		}
	}

	.#{$prefix}--#{$charts-prefix}--shape-node__body {
		position: absolute;
		top: calc(100% + #{$spacing-01});
		text-align: center;
	}

	.#{$prefix}--#{$charts-prefix}--shape-node__subtitle {
		padding-bottom: $spacing-01;
		@include carbon--type-style($name: body-short-01);
		color: $text-01;
	}

	.#{$prefix}--#{$charts-prefix}--shape-node__icon {
		display: flex;
	}

	.#{$prefix}--#{$charts-prefix}--shape-node__title {
		@include carbon--type-style($name: body-short-01);
		color: $text-01;
		padding-top: $spacing-01;
		margin-bottom: 1px;
	}
}