/**
* @prop --font-family: Font family of the text placed within the tooltip
* @prop --background-color: Background color of the tooltip
* @prop --color: Text color within the tooltip
* @prop --border-color: Border color of the tooltip
*/
:host {
  --font-family: var(--amplify-font-family);
  --background-color: var(--amplify-secondary-color);
  --color: var(--amplify-secondary-contrast);
  --border-color: var(--amplify-secondary-color);
}

.tooltip {
  display: inline;
  position: relative;
  font-size: var(--amplify-text-xxs);
  font-family: var(--font-family);
  margin: 0 0 0 16px;
}
.tooltip :after {
  background-color: var(--background-color);
  border-radius: 2px;
  bottom: 46px;
  color: var(--color);
  content: attr(data-text);
  text-decoration: none;
  padding: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.tooltip :before {
  border: solid;
  border-color: var(--border-color) transparent transparent transparent;
  border-width: 5px;
  bottom: 36px;
  content: "";
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  font-size: var(--amplify-text-sm);
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.tooltip :hover:after {
  opacity: 1;
  transition-delay: 1s;
}
.tooltip :hover:before {
  opacity: 1;
  transition-delay: 1s;
}

.auto-show-tooltip :after {
  opacity: 1;
  transition-delay: 1s;
}
.auto-show-tooltip :before {
  opacity: 1;
  transition-delay: 1s;
}