@use '../abstracts/cds-vars' as vars;
@use '../abstracts/cds-mixins' as mixins;
@use '../abstracts/cds-config' as config;

//$_tooltip-tip-border-radius: config.$config-global-border-radius !default;
$_cds-tooltip-border-radius: var(--cds-tooltip-br) !default;
$_cds-tooltip-tip-border-radius: var(--cds-tooltip-tip-br);

.cds-tooltip {
    position: relative;

    &:hover [class*="cds-tooltip__text"] {
        opacity: 1;
        visibility: visible;
    }

    &__text {
        @include mixins.cds-paragraph-s;
        position: absolute;
        width: max-content;
        text-wrap: wrap;
        cursor: help;
        z-index: vars.$cds-layer-fixed;
        opacity: 0;
        visibility: hidden;
        border-radius: $_cds-tooltip-border-radius;
        color: var(--cds-color-text-inverse);
        background-color: var(--cds-color-background-inverse);
        padding: vars.$cds-spacing-100;

        /* DEFAULT */
top: calc(100% + vars.$cds-spacing-50);
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    text-align: center;

        &::after {
            display: block;
            content: "";
            position: absolute;
            border-width: 0.5rem;
            border-style: solid;

            /* DEFAULT */
top: auto;
    left: 50%;
    right: auto;
    bottom: 100%;
    margin-left: -0.5rem;
    transform: translateY(0);
    border-color: transparent transparent var(--cds-color-background-inverse) transparent;
        }
    }

    //STYLE MODIFIERS
    &--help {
        color: var(--cds-color-text-inverse);
        background-color: var(--cds-color-background-inverse);
        padding: vars.$cds-spacing-100;

        &::after {
            display: block;
        }
    }

    &--tip {
        color: var(--cds-color-text-default);
        background-color: var(--cds-color-background-default);
        padding: vars.$cds-spacing-25 vars.$cds-spacing-100;
        border-radius: $_cds-tooltip-tip-border-radius;
        box-shadow: vars.$cds-elevation-subtle;
        border: 1px solid var(--cds-color-border-default);
        box-sizing: border-box;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;

        &::after {
            display: none;
        }
    }

    //POSITION MODIFIERS
    &--top {
        top: auto;
        left: 50%;
        right: auto;
        bottom: calc(100% + vars.$cds-spacing-50);
        transform: translateX(-50%);
        text-align: center;

        &::after {
            top: 100%;
            left: 50%;
            right: auto;
            bottom: auto;
            margin-left: -0.5rem;
            transform: translateY(0);
            border-color: var(--cds-color-background-inverse) transparent transparent transparent;
        }
    }

    &--bottom {
        top: calc(100% + vars.$cds-spacing-50);
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translateX(-50%);
        text-align: center;

        &::after {
            top: auto;
            left: 50%;
            right: auto;
            bottom: 100%;
            margin-left: -0.5rem;
            transform: translateY(0);
            border-color: transparent transparent var(--cds-color-background-inverse) transparent;
        }
    }

    &--left {
        top: 50%;
        left: auto;
        right: calc(100% + vars.$cds-spacing-50);
        bottom: auto;
        transform: translateY(-50%);
        text-align: right;

        &::after {
            top: auto;
            left: calc(100% + vars.$cds-spacing-50);
            right: auto;
            bottom: 50%;
            margin-left: -0.5rem;
            transform: translateY(50%);
            border-color: transparent transparent transparent var(--cds-color-background-inverse);
        }
    }

    &--right {
        top: 50%;
        left: calc(100% + vars.$cds-spacing-50);
        right: auto;
        bottom: auto;
        transform: translateY(-50%);
        text-align: left;

        &::after {
            top: 50%;
            left: auto;
            right: 100%;
            bottom: auto;
            transform: translateY(-50%);
            border-color: transparent var(--cds-color-background-inverse) transparent transparent;
        }
    }

    //SIZE MODIFIERS
    &--small {
        max-width: vars.$cds-tooltip-s;
    }

    &--medium {
        max-width: vars.$cds-tooltip-m;
    }
}