@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-circle') {
	.#{$prefix}--#{$charts-prefix}--circle {
		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%;
		border-radius: 100%;
		position: relative;
		cursor: pointer;

		&:focus {
			outline: none;
			box-shadow: 0 0 0 1px $focus;
		}

		&:hover {
			background-color: $hover-ui;
		}
	}

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

	.#{$prefix}--#{$charts-prefix}--circle__title {
		@include carbon--type-style($name: productive-heading-01);
		padding-top: $spacing-01;
		margin-bottom: 1px;
	}

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