@import '../utils/variables';
@import '../utils/mixins';

.comet-toolbar.comet-ui {
	position: fixed;
	top: 30%;
	right: 100px;
	z-index: 1;
	width: 170px;
	background: white;
	padding: 10px;
	@include box_shadow( 0 0 5px 2px rgba( 0, 0, 0, .3 ) );
	@include border_radius( 3px );

	&.comet-hide { display: none; }

	> .comet-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;

		button {
			cursor: pointer;

			&.comet-dragger {
				@include transform( rotate( 90deg ) );

				.cico {
					width: 17px;
					height: 17px;
					font-size: 17px;
					display: block;
				}

				&:hover, &:focus, &:active { color: $daAccent; }

			}

			&.comet-close {
				padding: 8px;
				border: 1px solid $daLight;
				@include border_radius( 100% );

				.cico {
					width: 10px;
					height: 10px;
					font-size: 10px;
					display: block;
				}

				&:hover {
					color: $daAccent;
					border-color: $daAccent;
				}

			}
		}

	}

	> .comet-buttonset {
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		.comet-button {
			width: 30px;
			height: 30px;
			padding: 6px;

			.cico {
				width: 18px;
				height: 18px;
				font-size: 18px;
				display: block;
			}

			&.comet-active { background: $liLight; }

			&:hover .comet-tooltip { left: 50%; }

		}

		.comet-tooltip {
			position: absolute;
			left: -9999em;
			top: 100%;
			z-index: 1;
			padding: 5px;
			font-size: 13px;
			color: white;
			margin-top: 5px;
			background: rgba( 0, 0, 0, .7 );
			@include transform( translate( -50%, 0 ) );
			@include border_radius( 5px );

			&:before { 
				content: '';
				border: 0;
				width: 0;
				height: 0;
				position: absolute;
				bottom: 100%;
				left: 50%;
				margin-left: -5px;
				border-left: 5px solid transparent;
				border-right: 5px solid transparent;
				border-bottom: 5px solid rgba( 0, 0, 0, .7 );
			}

		}

		.comet-inline {
			position: relative;

			&.comet-active > .comet-absui {
				left: auto;
				right: -10px;
				width: 170px;
				display: flex;
				align-items: center;
				@include transform( translate( 0, 0 ) );

				&:before {
					left: auto;
					right: 20px;
				}

				.comet-button { color: white; }
			}
		}

	}

}

.comet .cpb-content .comet-editable.comet-ui {
	outline: 0;
	@include box_shadow( none );

	&:hover, &:focus, &:active {
		background: rgba( 255, 255, 255, .5 );
		color: $liDark; 
	}

}