/* This file is used as dependency in:
   ../../modules/sec-image-slider.module/module.html 
   ../../modules/macros/_tooltip.html */

.pwr-tooltip__icon svg circle {
    fill: rgba(var(--clr-base-dk-rgb),.3);
}

.pwr-tooltip__icon:hover svg circle {
    fill: rgba(var(--clr-base-dk-rgb),1);
}

.pwr--dark .pwr-tooltip__icon svg circle {
    fill: rgba(var(--clr-base-lt-rgb),.3);
}

.pwr--dark .pwr-tooltip__icon:hover svg circle {
    fill: rgba(var(--clr-base-lt-rgb),1);
}

.pwr--dark .pwr-tooltip__icon svg g g {
    fill: var(--clr-base-dk);
}

.pwr-tooltip {
    display: inline-block;
}

.pwr-tooltip__arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
}

.pwr-tooltip__arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
}

.pwr-tooltip__arrow {
    visibility: hidden;
}

.pwr-tooltip__arrow::before {
    content: '';
    transform: rotate(45deg);
    visibility: hidden;
}

.pwr-tooltip__text-wrapper {
    opacity: 0;
    visibility: hidden;
}

.pwr-tooltip__text-wrapper[data-show] {
    visibility: visible;
}

.pwr-tooltip__text-wrapper[data-show] .pwr-tooltip__arrow::before {
    visibility: visible;
}

.pwr-tooltip:hover .pwr-tooltip__text-wrapper {
    opacity: 1;
}

.pwr-tooltip__text[data-popper-placement^='top'] > .pwr-tooltip__arrow {
    bottom: -4px;
}

.pwr-tooltip__text[data-popper-placement^='bottom'] > .pwr-tooltip__arrow {
    top: -4px;
}

.pwr-tooltip__text[data-popper-placement^='left'] > .pwr-tooltip__arrow {
    right: -4px;
}

.pwr-tooltip__text[data-popper-placement^='right'] > .pwr-tooltip__arrow {
    left: -4px;
}

.pwr-tooltip__text {
    background-color: var(--clr-background-dk);
    border-radius: var(--br-box);
    color: var(--clr-text-dk);
    padding: 8px 12px;
    font-size: 12px;
    font-family: var(--ff-base);
    font-weight: 500;
    line-height: 1.4em;
    max-width: 200px;
    z-index: 1;
}

.pwr--dark .pwr-tooltip__text {
    background-color: var(--clr-background-lt);
    color: var(--clr-text-lt);
}