%base-bubble-text {
	position: relative;

	max-width: $bubble-max-width;
	padding: 8px 16px;

	word-break: break-word;
	white-space: pre-line;

	&:before {
		content: '';
		display: block;

		width: 0.875rem;
		height: 0.875rem;
		position: absolute;

		top: 0;
	}
}

.#{$component-prefix}bubble {
	// display: flex;
	// align-items: flex-start;
	line-height: 1.25;

	&.-self {
		display: grid;
		justify-items: end;
		justify-self: end;
		grid-template-columns: 1fr max-content;
		grid-template-rows: max-content max-content;

		> .#{$component-prefix}bubble-timestemp {
			grid-row: 1;
			margin-bottom: 0.25rem;
			padding-right: 0.75rem;
			text-align: right;
			color: $color-gray-600;
		}

		> .#{$component-prefix}bubble-text {
			grid-row: 2;
		}


		> .#{$component-prefix}bubble-icon {
			grid-row: 2;
			grid-column: 2;

			align-self: center;

			width: 2rem;
			height: 2rem;

			display: flex;
			align-items: center;
			justify-content: center;

			font-size: 1.25rem;
			color: $color-primary;

			cursor: pointer;
		}

		&.-error {
			> .#{$component-prefix}bubble-text {
				opacity: .5;
			}
		}
	}

	&.-counterpath {
		display: grid;
		align-items: start;
		justify-items: start;
		justify-content: start;
		grid-template-columns: max-content 1fr;

		> .#{$component-prefix}bubble-text {
			grid-column: 2;
		}

		> .#{$component-prefix}bubble-timestemp {
			grid-column: 2;
			margin-bottom: 0.25rem;
			padding-left: 0.75rem;
			color: $color-gray-600;
		}

		> *:not(:only-child):first-child {
			margin-right: 0.25rem;
		}
	}

	&.-self > .#{$component-prefix}bubble-text {
		@extend %base-bubble-text;

		position: relative;
		margin-right: $bubble-radius;

		color: $color-white;
		background-color: $color-primary;

		border-radius: $bubble-radius;

		&:before {
			right: -0.5rem;
			top: 0;

			border-left: 0.5rem solid $color-primary;
			border-bottom-left-radius: 100%;

			transform: rotate(270deg);
		}
	}

	&.-counterpath > .#{$component-prefix}bubble-text {
		@extend %base-bubble-text;

		position: relative;

		margin-left: $bubble-radius;

		color: $color-dark;
		background-color: $color-gray-200;

		border-radius: $bubble-radius;

		&:before {
			left: -0.5rem;

			border-right: 0.5rem solid $color-gray-200;
			border-bottom-right-radius: 100%;

			transform: rotate(90deg) ;
		}

	}

}