/*
 * Licensed Materials - Property of IBM
 *
 * IBM Cognos Products: Glass
 *
 * (C) Copyright IBM Corp. 2015, 2018
 *
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */

.coachMarkContainer {
	position: relative;
}

$coachmark-outter-size: 12px;
$coachmark-inner-size: $space-xs;

/* coachMark bubbles */
.coachMark {
	position: absolute;
	top: 41px;
	right: 18px;
	width: $coachmark-outter-size;
	height: $coachmark-outter-size;
	@include theming(color, gray5);
	font-size: $body-size-s;
	z-index: 4000; /* Large zIndex to be on top of dashboard */
	outline: 0;
	cursor: pointer;
	[dir="rtl"] & {
	  right: auto;
	  left: $space-s;
    }
}

.accessibilityMode .coachMark:focus[tabindex] {
	outline: 0;
}
.accessibilityMode .coachMark:focus:after {
    content: '';
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: -4px;
    right: -4px;
    border-radius: 50%;
    border: 2px dotted theming(gray1);
}

.coachMark.vertical {
    top: 19px;
    right: 8px;
	&.narrow {
		right: 0px;
	}
    [dir="rtl"] & {
      right: auto;
      left: -8px;
    }
}

.navbar.narrow .coachMark.vertical {
	right: 0px;
}
@media (max-width: 1280px) {
	.coachMark.vertical {
		right: 0px;
	}
}

// Special coachMark which should appear between content folders per UX spec.
[id="com.ibm.bi.contentApps.teamFoldersSlideoutPluginContainer"] .coachMark.vertical {
    top: -8px;
}

.coachMark svg {
	@include theming(fill, secondary2);
}

/* coachMark popovers */
.coachMarkPopover {
	z-index: 1000000 !important;
	width: 300px;
    max-width: none;
}

.coachMarkPopover .coachMarkTitle,
.coachMarkPopover .coachMarkText,
.coachMarkPopover .actionableLink {
    padding: 0 $space-s ;
	margin-bottom: $space-s;
}

.coachMarkPopover .coachMarkTitle {
	font-size: $body-size-s;
	font-weight: $fw-bold;
  background-color: $white;
	padding-top: $space-m;
	@include theming(color, gray5);
}
.coachMarkPopover .popover-title {
	border-bottom-width: 0px;
}
.coachMarkPopover .coachMarkText {
	font-size: $body-size;
	@include theming(color, gray4);
	min-height: 71px;
}

.coachMarkPopover .coachMarkClose {
	position: absolute;
	right: $space-s;
	top : 24px;
	[dir="rtl"] & {
	  right: auto;
	  left: $space-s;
	}
}
.coachMarkPopover .coachMarkClose,
.coachMarkPopover .coachMarkClose svg {
	width: 16px;
	height: 16px;
	cursor: pointer;
}
.accessibilityMode .coachMarkClose:focus svg {
	outline: 1px dotted $focus;
}

.coachMarkPopover .actionableLink {
	@include theming(color, primary1);
	a {
		@include theming(color, primary1);
	}
	@extend %caption;
}

.popover.coachMarkPopover {
	&.right {
	    margin-left: 18px;
	    [dir="rtl"] & {
	      margin-left: 0px;
	      margin-right: 18px;
	    }
		>.arrow {
			@include theming(border-right-color, gray1);
			display: inherit;
			[dir="rtl"] & {
			  border-right-color: none;
			  @include theming(border-left-color, gray1);

			}
		}
		>.arrow:after {
			left: 11px;
			[dir="rtl"] & {
			  left: auto;
			  right: 11px;
			}
		}
	}
	&.bottom {
	    margin-top: 18px;
		>.arrow {
			@include theming(border-bottom-color, gray1);

			display: inherit;
		}
	}
}


/*-------------animation for bubbles---------------*/
.wa-hint-bubble {
	height: $coachmark-outter-size;
	width: $coachmark-outter-size;
	position:absolute;
	top: 0;
	left: 0;
	[dir="rtl"] & {
	  left: auto;
	  right: 0;
	}
    animation: coachmark 0.5s ease-in-out 5 alternate;
}
.wa-hint-bubble-inside-animated {
	height: $coachmark-inner-size;
	width: $coachmark-inner-size;
    top: 2px;
    left: 2px;
    [dir="rtl"] & {
	  left: auto;
	  right: 2px;
	}
}

@keyframes coachmark {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.1);
    }
}
/*-------------animation for bubbles---------------*/