@use "sass:map";
@use "../../01-core/prefix" as *;
@use "./tooltip.config" as config;
@use "./tooltip.mixins" as tooltip;

@layer ss.components {
    .#{$ss-prefix-module}-tooltip {
        @include tooltip.ss-tooltip;
    }

    .#{$ss-prefix-module}-tooltip[data-placement="top"] {
        bottom: calc(100% + map.get(config.$ss-tooltip-config, offset));
        left: 50%;
        transform: translateX(-50%);
    }

    .#{$ss-prefix-module}-tooltip[data-placement="bottom"] {
        top: calc(100% + map.get(config.$ss-tooltip-config, offset));
        left: 50%;
        transform: translateX(-50%);
    }

    .#{$ss-prefix-module}-tooltip[data-placement="left"] {
        right: calc(100% + map.get(config.$ss-tooltip-config, offset));
        top: 50%;
        transform: translateY(-50%);
    }

    .#{$ss-prefix-module}-tooltip[data-placement="right"] {
        left: calc(100% + map.get(config.$ss-tooltip-config, offset));
        top: 50%;
        transform: translateY(-50%);
    }

    // Legacy wrapper API: the class wraps the trigger and carries the tip
    // text in a `tooltip-data` attribute (see mixins for the contract).
    .#{$ss-prefix-module}-tooltip[tooltip-data] {
        @include tooltip.ss-tooltip-wrapper;

        &.#{$ss-prefix-module}-tooltip--right {
            @include tooltip.ss-tooltip-wrapper-right;
        }
        &.#{$ss-prefix-module}-tooltip--left {
            @include tooltip.ss-tooltip-wrapper-left;
        }
        &.#{$ss-prefix-module}-tooltip--top {
            @include tooltip.ss-tooltip-wrapper-top;
        }
        &.#{$ss-prefix-module}-tooltip--bottom {
            @include tooltip.ss-tooltip-wrapper-bottom;
        }
    }
}