@charset "utf-8";

[data-rfw-tooltip] {
    border-style: solid;
    border-width: 2px;
    margin-right: 20px;
    padding: 10px;
    position: absolute;
    z-index: 10000;
}

    [data-rfw-tooltip][data-rfw-tooltip-state=invisible] {
        display: none;
        height: 0;
        opacity: 0;
        width: 0;
    }

    [data-rfw-tooltip][data-rfw-tooltip-edit],
    [data-rfw-tooltip][data-rfw-tooltip-edit][data-rfw-tooltip-state=invisible] {
        display: block;
        height: auto;
        width: auto;
    }

    [data-rfw-tooltip][data-rfw-tooltip-edit=left],
    [data-rfw-tooltip][data-rfw-tooltip-edit=left][data-rfw-tooltip-state=invisible] {
        white-space: nowrap;
    }

    [data-rfw-tooltip][data-rfw-tooltip-state=fadein] {
        animation: fadein 1s ease 0s 1 forwards;
    }

    [data-rfw-tooltip][data-rfw-tooltip-state=fadeout] {
        animation: fadeout 1s ease 0s 1 forwards;
    }

    [data-rfw-tooltip] [data-rfw-tooltip-tail=background],
    [data-rfw-tooltip] [data-rfw-tooltip-tail=border] {
        border-style: solid;
        position: absolute;
    }

    [data-rfw-tooltip][data-rfw-tooltip-position=top] [data-rfw-tooltip-tail=background] {
        border-width: 14px 14px 0 0;
        bottom: -14px;
        left: 16px;
    }

    [data-rfw-tooltip][data-rfw-tooltip-position=top] [data-rfw-tooltip-tail=border] {
        border-width: 18px 20px 0 0;
        bottom: -18px;
        left: 14px;
    }

    [data-rfw-tooltip][data-rfw-tooltip-position=bottom] [data-rfw-tooltip-tail=background] {
        border-width: 0 14px 14px 0;
        left: 16px;
        top: -14px;
    }

    [data-rfw-tooltip][data-rfw-tooltip-position=bottom] [data-rfw-tooltip-tail=border] {
        border-width: 0 20px 18px 0;
        left: 14px;
        top: -18px;
    }

[data-rfw-tooltip=error] {
    background-color: white;
    border-color: red;
    color: red;
}

    [data-rfw-tooltip=error] [data-rfw-tooltip-tail=background] {
        border-color: white transparent;
    }

    [data-rfw-tooltip=error] [data-rfw-tooltip-tail=border] {
        border-color: red transparent;
    }

@keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeout {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}