/*!
 * AD Weave Design System (ad-tolltip.css)
 * Version: 1.0
 * License: GNU General Public License v2.0 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 */

/* This .css file is used for create tooltip classes with different directions */

/* --------------------------------------------
/* Table of Content
/* --------------------------------------------
   Tooltip with Default Structure
   Tooltip with Top Direction Style
*/

.ad-tooltip[data-tooltip] {
	position: relative;
	z-index: 2;
}
.ad-tooltip[data-tooltip]:before,
.ad-tooltip[data-tooltip]:after {
	visibility: hidden;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: var(--tooltip-opacity);
	pointer-events: none;
}
.ad-tooltip[data-tooltip]:before {
	content: var(--tooltip-content-attribute);
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-bottom: 5px;
    margin-left: -80px;
    padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
    min-width: var(--tooltip-width);
	width: var(--tooltip-width);
    -webkit-border-radius: var(--tooltip-border-raidus);
    -moz-border-radius: var(--tooltip-border-raidus);
    border-radius: var(--tooltip-border-raidus);
    background-color: var(--tooltip-bg);
	font-family:var(--tooltip-font-family);
	font-size:var(--tooltip-font-size);
	font-weight: var(--tooltip-font-weight);
	line-height: var(--tooltip-line-height);
	color: var(--tooltip-font-color);
    text-align: left;
	-moz-box-shadow: var(--tooltip-shadow);
	-webkit-box-shadow: var(--tooltip-shadow);
	box-shadow: var(--tooltip-shadow);
    white-space:normal;
    word-break: break-word;
}

/* Tooltip Triangle - Default Top Direction */
.ad-tooltip[data-tooltip]:after {
    position: absolute;
    bottom: 150%;
    left: 0;
	right:0;
	margin: 0 auto;
    width: 0;
    border-top: var(--tooltip-arrow-width) var(--border-style) var(--tooltip-arrow-bg);
    border-right: var(--tooltip-arrow-width) var(--border-style) transparent;
    border-left: var(--tooltip-arrow-width) var(--border-style) transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
}

/* Tooltip Triangle - Right Direction */
.ad-tooltip.right[data-tooltip]:after {
    border-top: var(--tooltip-arrow-width) var(--border-style) transparent;
    border-bottom: var(--tooltip-arrow-width) var(--border-style) transparent;
    border-right: var(--tooltip-arrow-width) var(--border-style) var(--tooltip-arrow-bg);
}

/* Tooltip Triangle - Left Direction */
.ad-tooltip.left[data-tooltip]:after {
    border-right: var(--tooltip-arrow-width) var(--border-style) var(--tooltip-arrow-bg);
    border-top: var(--tooltip-arrow-width) var(--border-style) transparent;
    border-bottom: var(--tooltip-arrow-width) var(--border-style) transparent;
}

/* Tooltip Triangle - Bottom Direction */
.ad-tooltip.bottom[data-tooltip]:after {
    border-left: var(--tooltip-arrow-width) var(--border-style) transparent;
    border-right: var(--tooltip-arrow-width) var(--border-style) transparent;
    border-top: var(--tooltip-arrow-width) var(--border-style) var(--tooltip-arrow-bg);
}

/* Show tooltip content on hover */
.ad-tooltip[data-tooltip]:hover:before,
.ad-tooltip[data-tooltip]:hover:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: var(--tooltip-active-opacity);
}