/*
 *  Copyright 2018 Adobe
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

[data-cmp-examples-tooltip] {
    position: relative;
    overflow: visible;
    cursor: pointer;

    &:after {
        content: attr(data-cmp-examples-tooltip);

        position: absolute;
        bottom: 80%;
        left: 50%;
        z-index: @cmp-examples-z-index-tooltip;

        display: none;
        border-radius: @cmp-examples-border-radius;
        padding: @cmp-examples-spacing-1 10*@px;

        font-size: @cmp-examples-font-size-xs;
        line-height: @cmp-examples-line-height;
        color: @cmp-examples-color-white;
        background: @cmp-examples-color-gray-800;

        pointer-events: none;
        white-space: nowrap;

        .transform(~'translate(-50%, -@{cmp-examples-spacing-1})');
        .transform-origin(left, top);
    }

    &:hover {
        &:after {
            display: block;
        }
    }
}
