// Import Complianz LESS Variables
@import 'variables.less';

.cmplz-premium {
  color:#2271b1;
}
/* START TOOLTIP STYLES */
[cmplz-tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[cmplz-tooltip]::before,
[cmplz-tooltip]::after {
  text-transform: none;
  font-size: 13px;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}

[cmplz-tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}

[cmplz-tooltip]::after {
  content: attr(cmplz-tooltip); /* magic! */
  font-weight:normal;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
  min-width:150px;
  text-align:left;
}

/* Make the tooltips respond to hover */
[cmplz-tooltip]:hover::before,
[cmplz-tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[cmplz-tooltip='']::before,
[cmplz-tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[cmplz-tooltip]:not([flow])::before,
[cmplz-tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}

[cmplz-tooltip]:not([flow])::after,
[cmplz-tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}

[cmplz-tooltip]:not([flow])::before,
[cmplz-tooltip]:not([flow])::after,
[cmplz-tooltip][flow^="up"]::before,
[cmplz-tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[cmplz-tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}

[cmplz-tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}

[cmplz-tooltip][flow^="down"]::before,
[cmplz-tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[cmplz-tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}

[cmplz-tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[cmplz-tooltip][flow^="right"]::before {
  top: 10px;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 23px);
  transform: translate(.5em, -50%);
}

[cmplz-tooltip][flow^="right"]::after {
  top: 10px;
  left: calc(100% + 23px);
  transform: translate(.5em, -50%);
  min-width:150px;
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
	opacity: .9;
	transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
	opacity: .9;
	transform: translate(0, -50%);
  }
}

/* FX All The Things */
[cmplz-tooltip]:not([flow]):hover::before,
[cmplz-tooltip]:not([flow]):hover::after,
[cmplz-tooltip][flow^="up"]:hover::before,
[cmplz-tooltip][flow^="up"]:hover::after,
[cmplz-tooltip][flow^="down"]:hover::before,
[cmplz-tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[cmplz-tooltip][flow^="left"]:hover::before,
[cmplz-tooltip][flow^="left"]:hover::after,
[cmplz-tooltip][flow^="right"]:hover::before,
[cmplz-tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}
/* Documents overview */
.cmplz-shortcode {
  right:10000px;
  position:absolute;
  background-color:#fff;
  padding: 0;
  white-space: nowrap;
}

.shortcode {
  cursor:pointer;
}

#cmplz-cookiebanner-filter .search-box {
  margin-bottom:5px;
  select {
	margin-bottom:3px;
  }
}
.row-actions{
  left:0;
}
/*loader*/
.cmplz-loader {
  margin: 0;
  width: 50px;
  height: 15px;
  text-align: center;
  font-size: 10px;
}
//wordpress inserts notices after the first h1 or h2. To prevent breaking layout we insert an empty h1 tag at the start of our page, where WP can insert the notice.
.cmplz-notice-hook-element {
  display:none;
}

.wrap .button.cmplz-header-btn{
  margin-left:6px;
  margin-top:20px;
}

.cookie-warning {
  .cmplz-panel-wrap{
	margin:0 0 10px 0;
  }
  .cmplz-document-button {
	margin-top: 0;
  }
}

#cmplz-header {
  font-size:15px;
  .button-black {
	background-color: black;
	color: white;
	border-color: black;
	padding: 0 25px;
	font-size:15px;
  }
  .link-black {
	color: #3c434a;
	padding: 5px 5px;
  }

}


.cmplz-loader {
  > div {
	margin:1px;
	background-color: #333;
	height: 100%;
	width: 3px;
	display: inline-block;

	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
	animation: sk-stretchdelay 1.2s infinite ease-in-out;
  }
  .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
  }
  .rect3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
  }
  .rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
  }
  .rect5 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
  }
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
	transform: scaleY(0.4);
	-webkit-transform: scaleY(0.4);
  }  20% {
	   transform: scaleY(1.0);
	   -webkit-transform: scaleY(1.0);
	 }
}

/*
    Hide nags from other plugins
*/
.error, .notice, .update-nag, .notice-info {
	&:not(.really-simple-plugins) {
		display: none !important;
	}
}

/**
Admin notice
 */
.cmplz-admin-notice {

  .cmplz-admin-notice-container {
	display: flex;
	padding: 12px;
	align-items: center;

	.cmplz-logo img {
	  margin-top: 0.5em;
	}

	.dashicons {
	  margin-left: 10px;
	  margin-right: 5px;
	}
  }
}

#complianz {
  .cmplz-copy-shortcode{
	cursor:pointer;
  }
  .cmplz-selectable {
	-webkit-touch-callout: all; /* iOS Safari */
	-webkit-user-select: all; /* Safari */
	-khtml-user-select: all; /* Konqueror HTML */
	-moz-user-select: all; /* Firefox */
	-ms-user-select: all; /* Internet Explorer/Edge */
	user-select: all; /* Chrome and Opera */
  }
	.cmplz-region-indicator {
	  display: flex;
	  align-items: center;
	  img {
		width: 25px;
		height: 25px;
		margin-left: 5px;
	  }
	}

  	.cmplz-documents .cmplz-region-indicator img {
	  width: 14px;
	  height: 14px;
	  margin-left:0;
	}

  	margin:0 0 0 -20px;

	#cmplz-header {
		display: flex;
		justify-content: space-between;

		img {
		  margin-left:@small-margin;
		  width: 120px;
		  height: 34px;
		}

		padding: @default-padding;
		background-color: #fff;

		.cmplz-header-right {
			display: flex;
			align-items: center;
			a {
				margin-right: @default-margin;
			}
		}
	}

	#cmplz-content-area {
		margin: @small-margin;
	}

	/**
	icons
	 */
	.cmplz-icon {
		&.cmplz-success {
			color:@color-success;
			svg {
				stroke:@color-success;;
				fill:@color-success;;
			}
			&.shortcode {
				color:#000;
			  &.copied {
				color:@color-success;
			  }
			}

		}
		&.cmplz-disabled {
			color:@color-disabled;
			svg {
				stroke:@color-disabled;;
				fill:@color-disabled;;
			}
		}

		&:hover {
			color: #000;
		}

		&.cmplz-bullet {
			height: 11px;
			width: 11px;
			margin-top:3px;
			&.cmplz-disabled {
				background-color: @color-disabled;
			}

			&.cmplz-completed  {
			  background-color: @color-success;
			}
			&.cmplz-success  {
			  background-color: @brand-primary;
			}
			&.cmplz-warning  {
			  background-color: @color-warning;
			}

		}

	}
	.cmplz-graph-container {
	  width:80%;
	  min-width:500px;
	  position:relative;
	}

  	.cmplz-insights {
	  .cmplz-graph-container {
		//width:100%;
		//position:relative;
		top:0;
		right:0;
		bottom:0;
		left:0;
	  }

	  canvas.cmplz-graph {
		height:85px !important;
	  }
	}



  /*skeleton*/
  @panelheight : 38px;
  @panelborder : 1px;
  @paneloffset : 3*(@panelborder+@panelheight);
  @rows : 6;
  .cmplz-skeleton:empty {
	margin: auto;
	margin-bottom: 25px;
	width: 100%;
	height: (@rows*@panelheight)+(@rows+1)*@panelborder; /* change height to see repeat-y behavior */

	background-image:
			linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0.5) 15% ),
			linear-gradient( #f2f2f2 @panelheight, transparent 0 ),
			linear-gradient( #f2f2f2 @panelheight, transparent 0 ),
			linear-gradient( #f2f2f2 @panelheight, transparent 0 ),
			linear-gradient( #f2f2f2 @panelheight, transparent 0 );

	background-repeat: repeat-y;

	background-size:
			50px 200px, /* highlight */
			100% @paneloffset,
			100% @paneloffset,
			100% @paneloffset,
			100% @paneloffset;

	background-position:
			0 0, /* highlight */
			@panelborder @panelborder,
			@panelborder @panelheight+(2*@panelborder),
			@panelborder (2*@panelheight)+(3*@panelborder),
			@panelborder (3*@panelheight)+(4*@panelborder);

	background-color:#d6d8db;
	animation: shine 2.5s infinite;
  }
  @keyframes shine {
	to {
	  background-position:
			  100% 0, /* move highlight to right */
			  @panelborder @panelborder,
			  @panelborder @panelheight+(2*@panelborder),
			  @panelborder (2*@panelheight)+(3*@panelborder),
			  @panelborder (3*@panelheight)+(4*@panelborder);
	}
  }

  /*loader*/
  .cmplz-loader {
	margin: 0;
	width: 50px;
	height: 15px;
	text-align: center;
	font-size: 10px;
	> div {
	  margin:1px;
	  background-color: #333;
	  height: 100%;
	  width: 3px;
	  display: inline-block;
	  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
	  animation: sk-stretchdelay 1.2s infinite ease-in-out;
	}
	&.cmplz-loader-white >div {
	  background-color: #fff;
	}

	.rect2 {
	  -webkit-animation-delay: -1.1s;
	  animation-delay: -1.1s;
	}

	.rect3 {
	  -webkit-animation-delay: -1.0s;
	  animation-delay: -1.0s;
	}

	.rect4 {
	  -webkit-animation-delay: -0.9s;
	  animation-delay: -0.9s;
	}

	.rect5 {
	  -webkit-animation-delay: -0.8s;
	  animation-delay: -0.8s;
	}
  }



  @-webkit-keyframes sk-stretchdelay {
	0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
	20% { -webkit-transform: scaleY(1.0) }
  }

  @keyframes sk-stretchdelay {
	0%, 40%, 100% {
	  transform: scaleY(0.4);
	  -webkit-transform: scaleY(0.4);
	}  20% {
		 transform: scaleY(1.0);
		 -webkit-transform: scaleY(1.0);
	   }
  }

}