@import "../../styles/typography";
@import "../../styles/color";
@import "../../styles/sizes";

$inScale: scale3d(0.9, 0.9, 0.9);
$outScale: scale3d(1, 1, 1);
.one-ui-tooltip {
    $root: &;
    position: relative;
    box-sizing: border-box;

    * {
        box-sizing: inherit;
    }

    @include setMargin();

    &__message {
        //z-index: 1001 !important;
        z-index: var(--one-ui-dropdown-z-index);
        position: absolute;
        opacity: 0;
        pointer-events: none;
        padding: 4px;
        transform: $inScale;
        height: fit-content;
        transition:
            transform .3s cubic-bezier(0.01, 0.63, 0.02, 1),
            opacity 0.03s ease-in;

        &-wrapper {
            overflow: hidden;
            background: color(dark, 13);
            border: 1px solid color(dark , 10);
            color: color(grey, 0);
            font-family: 'Mulish', 'Open Sans', 'Helvetica Neue', sans-serif;
            //font-weight: bold;
            font-size: 11px;
            font-style: italic;

            .one-ui-tooltip__title {
                font-weight: bold;
            }
        }

        .one-ui-divider {
            width: calc(100% + 32px);
            margin-left: -16px;
        }

        &--open {
            opacity: 1;
            pointer-events: all;
            transition:
                transform .3s cubic-bezier(0.01, 0.63, 0.02, 1),
                opacity .1s cubic-bezier(0.01, 0.63, 0.02, 1);
        }

        &--position {
            &-auto-vertical-left{
                top: 100%;
                left: 0;
            }
            &-bottom-left {
                top: 100%;
                left: 0;
                transform-origin: top left;

                &#{$root}__message--open {
                    transform: $outScale;
                }
            }
            &-auto-vertical-center{
                top: 100%;
                left: 50%;
                transform: translate3d(-50%, 0, 0) $inScale;
            }
            &-bottom-center {
                top: 100%;
                left: 50%;
                transform: translate3d(-50%, 0, 0) $inScale;
                transform-origin: top center;

                &#{$root}__message--open {
                    transform: translate3d(-50%, 0, 0) $outScale;
                }
            }
            &-auto-vertical-right{
                top: 100%;
                right: 0;
            }
            &-bottom-right {
                top: 100%;
                right: 0;
                transform-origin: top right;

                &#{$root}__message--open {
                    transform: $outScale;
                }
            }

            &-top-left {
                bottom: 100%;
                left: 0;
                transform-origin: bottom left;

                &#{$root}__message--open {
                    transform: $outScale;
                }
            }

            &-top-center {
                bottom: 100%;
                left: 50%;
                transform: translate3d(-50%, 0, 0) $inScale;
                transform-origin: bottom center;

                &#{$root}__message--open {
                    transform: translate3d(-50%, 0, 0) $outScale;
                }
            }

            &-top-right {
                bottom: 100%;
                right: 0;
                transform-origin: bottom right;

                &#{$root}__message--open {
                    transform: $outScale;
                }
            }
        }
    }

    &__trigger {
        cursor: pointer;
        &--disabled {
            cursor: default;
        }
    }

}