.content-browser-tabs
	user-select none
	@extends .skin-presets
	width 72px
	padding 45px 20px
	box-sizing border-box
	overflow hidden
	background #fafafa
	&:after
		@extends .skin-presets .after

.browser-tab
	position relative
	z-index 1
	width 32px
	height 32px
	cursor pointer
	border 1px solid #a1a1a1
	border-radius 2px
	background #f8f8f8
	box-sizing border-box
	.browser-tab--icon
		z-index 1
	&:after, .browser-tab--icon
		background-position 4px 6px
		background-repeat no-repeat
		background-color #f5f5f5
		border-radius 2px
		content ""
		display block
		position absolute
		left 0
		right 0
		bottom 0
		top 0

	+ .browser-tab 
		margin-top 20px

	div[data-count]
		font-size 8px
		position absolute
		width 16px
		height 14px
		background #655a68
		border-radius 4px
		right -8px
		bottom -7px
		font-weight bold
		text-align center
		color #fff
		line-height 14px
		font-smoothing antialiased
		z-index 9
		font-family Verdana, sans-serif
		&:after
			content attr(data-count)
	&:hover:after, &:hover .browser-tab--icon
		background-color #fff
	&.active
		pointer-events none
		cursor default
		div[data-count]
			background #ff4c4c
		&:before
			@extends .presets-list-colors .before
			display block
			right -30px
			top 6px
	&.active 
	&:active
		background #dedede
		border-radius 2px
	[data-count='0']
		display none