@use "mixins";
@use "variables";

.ctct-header{
	display: none;
	position: relative;
	z-index: 2;
	@include mixins.wider-than('xsmall') {
		margin: 0 0 0 -20px;
		padding: 0 0 0 20px;
		background-color: variables.$color-white;
		border-bottom: 1px solid variables.$header-toolbar-border;
		display: flex;
		width: 100%;
		align-items: center;

		[dir="rtl"] & {
			margin: 0 -20px 0 0;
			padding: 0 20px 0 0;
		}
	}


	h2{
		margin: 0;
		padding: 0 0 0 39px;
		min-height: 32px;
		line-height: 32px;
		background: variables.$color-white url( '../images/ctct_ripple.svg' ) no-repeat 0 48%;
		background-size: 32px 32px;
		text-indent: -9999px;
		@include mixins.wider-than('small') {
			text-indent: 0;
		}
	}

	ul{
		padding: 0 0 0 20px;
		margin: 0;
		flex: 1;
		display: flex;
		align-items: center;
		width: 100%;

		li{
			margin: 0 15px 0 0;
			padding: 0;

			a{
				padding: 20px 5px;
				display: block;
				text-decoration: none;
				position: relative;

				&.is-active{
					font-weight: 600;
					text-decoration: underline;

					&::after,
					&::before {
						top: 100%;
						left: 50%;
						border: solid transparent;
						content: "";
						height: 0;
						width: 0;
						position: absolute;
						pointer-events: none;
					}

					&::after {
						border-color: transparent;
						border-top-color: variables.$color-white;
						border-width: 7px;
						margin-left: -7px;
					}

					&::before {
						border-color: transparent;
						border-top-color: variables.$header-toolbar-border;
						border-width: 8px;
						margin-left: -8px;
					}
				}

				&.ctct-connect-btn{
					color: variables.$color-white;
					background-color: variables.$color-blue;
					border: 1px solid variables.$color-blue-alt;
					padding: 8px;
					border-radius: 3px;
					font-weight: 500;

					&:hover,
					&:focus{
						background-color: variables.$color-blue-alt;
					}
				}

				&.ctct-disconnect{

					a{
						background-color: variables.$color-orange;
						border: 1px solid variables.$color-orange-alt;

						&:hover,
						&:focus{
							background-color: variables.$color-orange-alt;
						}
					}
				}
			}
		}
	}

	.ctct-status {
		display: none;
		@include mixins.wider-than('medium') {
			display: flex;
		}
		& {
		  align-items: center;
		  margin-right: 20px;
		  font-weight: 500;
		  padding: 7px 10px;
		  border: 1px solid variables.$color-white;
		  border-radius: variables.$radius;
		  text-decoration: none;
		  color: variables.$color-modal-alt-text;
		}

		&.ctct-cron-status {
		  margin-right: 0;
		  cursor: help;
		}

		&:hover,
		&:focus{
			color: variables.$color-black;
			border-color: variables.$color-silver;
			box-shadow: variables.$shadow;
		}

		&:focus{
			background-color: variables.$color-lighter-gray;
			color: variables.$color-black;
			box-shadow: none;
		}

		&::before{
			content: '';
			display: block;
			width: 10px;
			height: 10px;
			border-radius: 100%;
			background-color: variables.$color-red;
			margin-right: 7px;
			box-shadow: 0 0 5px variables.$box-shadow-02;

			[dir="rtl"] & {
				margin-left: 7px;
				margin-right: 0;
			}
		}

		&.ctct-connected{

			&::before{
				background-color: variables.$color-green;
			}
		}
	}
}