/* .smart-tooltip */

smart-tooltip {
    position: absolute;
    text-align: center;
    z-index: var(--smart-editor-drop-down-z-index);
    font-family: var(--smart-font-family);
    font-size: var(--smart-font-size);
    visibility: hidden;
    pointer-events: none;
}

.smart-tooltip[visible] {
    visibility: visible;
    pointer-events: auto;
}

.smart-tooltip .smart-tooltip-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: var(--smart-tooltip-padding);
    background-color: var(--smart-secondary);
    color: var(--smart-secondary-color);
    border: var(--smart-border-width) solid var(--smart-border);
    width: 100%;
    height: 100%;
    box-shadow: var(--smart-tooltip-content-shadow);
    opacity: 0.9;
    font-family: var(--smart-font-family);
}

.smart-tooltip[arrow],
.smart-tooltip[arrow][arrow-direction="bottom"] {
    padding-bottom: var(--smart-tooltip-arrow-width);
}

    .smart-tooltip[arrow][arrow-direction="top"] {
        padding-bottom: initial;
        padding-top: var(--smart-tooltip-arrow-width);
    }

    .smart-tooltip[arrow][arrow-direction="left"] {
        padding-bottom: initial;
        padding-left: var(--smart-tooltip-arrow-width);
    }

    .smart-tooltip[arrow][arrow-direction="right"] {
        padding-bottom: initial;
        padding-right: var(--smart-tooltip-arrow-width);
    }

    .smart-tooltip[arrow] .smart-tooltip-content:after,
    .smart-tooltip[arrow][arrow-direction="bottom"] .smart-tooltip-content:after {
        content: "";
        width: 0;
        height: 0;
        border-left: var(--smart-tooltip-arrow-width) solid transparent;
        border-right: var(--smart-tooltip-arrow-width) solid transparent;
        border-top: var(--smart-tooltip-arrow-width) solid var(--smart-tooltip-border);
        position: absolute;
        top: calc(100% - var(--smart-tooltip-arrow-width));
        left: calc(100% / 2 - var(--smart-tooltip-arrow-width));
        transform: translateX(var(--smart-tooltip-arrow-translate));
    }

    .smart-tooltip[arrow][arrow-direction="top"] .smart-tooltip-content:after {
        border-left: var(--smart-tooltip-arrow-width) solid transparent;
        border-right: var(--smart-tooltip-arrow-width) solid transparent;
        border-bottom: var(--smart-tooltip-arrow-width) solid var(--smart-tooltip-border);
        border-top: initial;
        top: 0;
        bottom: calc(100% + var(--smart-tooltip-arrow-width));
        transform: translateX(var(--smart-tooltip-arrow-translate));
    }

    .smart-tooltip[arrow][arrow-direction="right"] .smart-tooltip-content:after {
        border-bottom: var(--smart-tooltip-arrow-width) solid transparent;
        border-top: var(--smart-tooltip-arrow-width) solid transparent;
        border-left: var(--smart-tooltip-arrow-width) solid var(--smart-tooltip-border);
        border-right: initial;
        left: calc(100% - var(--smart-tooltip-arrow-width));
        top: calc(50% - var(--smart-tooltip-arrow-width));
        transform: translateY(var(--smart-tooltip-arrow-translate));
    }

    .smart-tooltip[arrow][arrow-direction="left"] .smart-tooltip-content:after {
        border-bottom: var(--smart-tooltip-arrow-width) solid transparent;
        border-top: var(--smart-tooltip-arrow-width) solid transparent;
        border-right: var(--smart-tooltip-arrow-width) solid var(--smart-tooltip-border);
        border-left: initial;
        left: 0;
        top: calc(50% - var(--smart-tooltip-arrow-width));
        transform: translateY(var(--smart-tooltip-arrow-translate));
    }

smart-tooltip:not([animation='none']) {
    visibility: visible;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}

    smart-tooltip:not([animation='none'])[visible] {
        opacity: 1;
    }