/**
 * Tooltip Styles
 * Usage: @HTML level use a data attribute
 * Usage: data-tooltip="Text to show on ToolTip all the time"
 * Usage: data-tooltip-disabled="Text to show on ToolTip only when element is disabled"
 */
/* Base styles for the element that has a tooltip */
[data-tooltip], [data-tooltip-disabled][disabled] {
  position: relative;
  overflow: visible;
  /* IE Fix */
  /* Hide the tooltip content by default */
}
[data-tooltip]:before, [data-tooltip]:after, [data-tooltip-disabled][disabled]:before, [data-tooltip-disabled][disabled]:after {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  bottom: 110%;
  left: 50%;
  -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
          transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -webkit-transform: translate(-50%, 50%);
      -ms-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
  pointer-events: none;
}
[data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, [data-tooltip-disabled][disabled]:hover:before, [data-tooltip-disabled][disabled]:hover:after, [data-tooltip-disabled][disabled]:focus:before, [data-tooltip-disabled][disabled]:focus:after {
  visibility: visible;
  opacity: 1;
}
[data-tooltip]:before, [data-tooltip-disabled][disabled]:before {
  z-index: 1001;
  border: 6px solid transparent;
  background: transparent;
  content: "";
  margin-left: -6px;
  margin-bottom: -12px;
  border-top-color: rgba(0, 0, 0, 0.95);
}
[data-tooltip]:after, [data-tooltip-disabled][disabled]:after {
  /*@extend %border-radius-md;*/
  /* TODO: use an @extend here when we add _variables.scss */
  border-radius: 5px;
  font-family: "MuseoSans",Arial,sans-serif;
  /* TODO: use a constant here */
  text-transform: none;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.95);
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  z-index: 1000;
}
[data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, [data-tooltip-disabled][disabled]:hover:before, [data-tooltip-disabled][disabled]:hover:after, [data-tooltip-disabled][disabled]:focus:before, [data-tooltip-disabled][disabled]:focus:after {
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

[data-tooltip]:after {
  content: attr(data-tooltip);
}

[data-tooltip-disabled][disabled]:after {
  content: attr(data-tooltip-disabled);
}