@charset "utf-8";
// Copyright 2019, Oath Inc.
// Licensed under the terms of the MIT license. See LICENSE file in project root for terms.

@import '../maps/color-maps.scss';
@import '../utilities/global-variables.scss';

$tooltip-text-color: map-get($denali-grey-colors,"100") !default;
$tooltip-bg-color: rgba(#303030, 0.9) !default;
$tooltip-corner-radius: $border-radius-sm !default;
$tooltip-text-size: 1.2rem !default;
$tooltip-padding: 6px 8px !default;
$tooltip-small-text-size: 1rem !default;
$tooltip-small-padding: 4px 6px !default;

@mixin tooltip-default {

    *[class*="d-tooltip"] {
        position: relative;

        &::after {
            content: attr(data-tooltip);
            z-index: 1000;
            position: absolute;
            visibility: hidden;
            opacity: 0;
            transition: 300ms;
            white-space: nowrap;

            padding: $tooltip-padding;
            font-size: $tooltip-text-size;
            border-radius: $tooltip-corner-radius;
            font-family: inherit;
            background-color: $tooltip-bg-color;
            color: $tooltip-text-color;

            // Position Bottom & Default
            left: 50%;
            top: calc(100% + 4px);
            transform: translateX(-50%);
        }

        &[class*="-small"]::after {
            // Small size
            font-size: $tooltip-small-text-size;
            padding: $tooltip-small-padding;
        }

        &[class*="tooltip-top"]::after {
            // Position Top
            top: 0%;
            transform: translate(-50%, calc(-100% - 4px));
        }

        &[class*="tooltip-left"]::after {
            // Position Left
            left: 0%;
            top: 50%;
            transform: translate(calc(-100% - 4px), -50%);
        }

        &[class*="tooltip-right"]::after {
            // Position Right
            left: calc(100% + 4px);
            top: 50%;
            transform: translateY(-50%);
        }

        &:hover::after,
        &:focus::after {
            visibility: visible;
            opacity: 1;
        }
    }

}

@mixin tooltip-theme {
    *[class*="d-tooltip"] {
        &::after {
            padding: $tooltip-padding;
            font-size: $tooltip-text-size;
            border-radius: $tooltip-corner-radius;
            font-family: inherit;
            background-color: $tooltip-bg-color;
            color: $tooltip-text-color;
        }
        &[class*="-small"]::after {
            font-size: $tooltip-small-text-size;
            padding: $tooltip-small-padding;
        }
    }
}