/*!
 * V4Fire Client Core
 * https://github.com/V4Fire/Client
 *
 * Released under the MIT license
 * https://github.com/V4Fire/Client/blob/master/LICENSE
 */

@import "super/i-block/i-block.styl"

$p = {
	maxHeight: 200px
}

b-v4-component-demo extends i-block
	width 70%

	margin 10px
	padding 10px

	border 1px dotted #CCC
	background-color alpha(#EEE, 0.2)

	&__root-wrapper
		display flex
		justify-content flex-start
		align-content center

	&__mods
		flex-grow 1

		max-height $p.maxHeight
		overflow auto

		margin-left 20px
		padding-left @margin-left

		border-left 1px dotted #CCC

	&__mod
		font-size 14px
		font-weight bold
		white-space nowrap

	&__mod + &__mod
		margin-top 10px

	&__mod-value
		border 0

		&_selected_true
			color #FFF
			background-color #008000

		&_highlighted_true
			position relative

			&:after
				content ""

				absolute top -2px right -2px

				display block
				size 8px

				border-radius 100%
				background-color #FF9300

	&__mod-value + &__mod-value
		margin-left 5px

	&__title
		margin-bottom 10px

		font-size 18px
		font-weight bold

	&__parents
		font-size 16px
		font-weight normal