@import "settings";
@import "keyframes";
[data-#{$simple-tooltip-prefix}] {
    box-sizing: border-box;
    position: relative;
    &::after,
    &::before {
        box-sizing: border-box;
        display: none;
        position: absolute;
        @if ($simple-tooltip-fade) {
            animation: #{$simple-tooltip-prefix}-fade $simple-tooltip-fade-delay ease-in-out;
        }
    }
    &::before {
        background-color: $simple-tooltip-bg-color;
        border-color: $simple-tooltip-border-color $simple-tooltip-border-color transparent transparent;
        border-radius: 0 $simple-tooltip-nub-border-radius 0 0;
        border-style: $simple-tooltip-border-style;
        border-width: $simple-tooltip-border-width $simple-tooltip-border-width 0 0;
        content: "";
        height: $simple-tooltip-nub-size;
        left: calc(50% - #{$simple-tooltip-nub-size / 2});
        position: absolute;
        top: calc(100% + #{$simple-tooltip-space});
        transform: rotate(-45deg);
        width: $simple-tooltip-nub-size;
        z-index: $simple-tooltip-zindex;
    }
    &::after {
        background-color: $simple-tooltip-bg-color;
        border-color: $simple-tooltip-border-color;
        border-radius: $simple-tooltip-border-radius;
        border-style: $simple-tooltip-border-style;
        border-width: $simple-tooltip-border-width;
        box-shadow: $simple-tooltip-box-shadow;
        color: $simple-tooltip-color;
        content: attr(aria-label);
        float: left;
        font-size: $simple-tooltip-font-size;
        height: auto;
        left: calc(50% - #{$simple-tooltip-min-width / 2});
        line-height: $simple-tooltip-line-height;
        margin: 0;
        padding: $simple-tooltip-padding;
        position: absolute;
        right: 0;
        text-align: $simple-tooltip-text-align;
        top: calc(100% + #{$simple-tooltip-nub-size / 2} + #{$simple-tooltip-space});
        white-space: pre-wrap;
        min-width: $simple-tooltip-min-width;
        max-width: $simple-tooltip-max-width;
        width: $simple-tooltip-min-width;
        z-index: $simple-tooltip-zindex - 1;
    }
    &:hover,
    &:focus,
    &:active {
        &::after,
        &::before {
            display: block;
        }
    }
    &:hover {
        &::after {
            z-index: $simple-tooltip-zindex + 1;
        }
        &::before {
            z-index: $simple-tooltip-zindex + 2;
        }
    }
}

[data-#{$simple-tooltip-prefix}-fade] {
    &::before,
    &::after {
        animation: #{$simple-tooltip-prefix}-fade $simple-tooltip-fade-delay ease-in-out;
    }
}

[data-#{$simple-tooltip-prefix}-orientation="n"] {
    &::before {
        top: auto;
        bottom: calc(100% + #{$simple-tooltip-space});
        transform: rotate(135deg);
    }
    &::after {
        top: auto;
        bottom: calc(100% + #{$simple-tooltip-nub-size / 2} + #{$simple-tooltip-space});
    }
}

[data-#{$simple-tooltip-prefix}-orientation="ne"] {
    &::before {
        top: auto;
        bottom: calc(100% + #{$simple-tooltip-space});
        transform: rotate(135deg);
    }
    &::after {
        top: auto;
        left: calc(50% - #{$simple-tooltip-nub-offset});
        right: auto;
        bottom: calc(100% + #{$simple-tooltip-nub-size / 2} + #{$simple-tooltip-space});
    }
}

[data-#{$simple-tooltip-prefix}-orientation="nw"] {
    &::before {
        top: auto;
        bottom: calc(100% + #{$simple-tooltip-space});
        transform: rotate(135deg);
    }
    &::after {
        top: auto;
        right: calc(50% - #{$simple-tooltip-nub-offset});
        left: auto;
        bottom: calc(100% + #{$simple-tooltip-nub-size / 2} + #{$simple-tooltip-space});
    }
}

[data-#{$simple-tooltip-prefix}-orientation="en"] {
    &::before {
        bottom: calc(50% - #{$simple-tooltip-nub-size} / 2);
        left: calc(100% + #{$simple-tooltip-space});
        top: auto;
        transform: rotate(225deg);
    }
    &::after {
        right: auto;
        left: calc(100% + #{$simple-tooltip-nub-size / 2} + #{$simple-tooltip-space});
        top: auto;
        bottom: calc(50% - #{$simple-tooltip-nub-offset});
    }
}

[data-#{$simple-tooltip-prefix}-orientation="e"] {
    &::before {
        bottom: calc(50% - #{$simple-tooltip-nub-size / 2});
        left: calc(100% + #{$simple-tooltip-space});
        top: auto;
        transform: rotate(225deg);
    }
    &::after {
        right: auto;
        left: calc(100% + #{$simple-tooltip-nub-size / 2} + #{$simple-tooltip-space});
        position: absolute;
        overflow: hidden;
        white-space: nowrap;
        bottom: auto;
        top: calc(50% - (#{$simple-tooltip-padding} * 2) + #{$simple-tooltip-line-height} / 2);
        height: calc(#{$simple-tooltip-padding} * 2 + #{$simple-tooltip-line-height});
    }
}

[data-#{$simple-tooltip-prefix}-orientation="es"] {
    &::before {
        bottom: calc(50% - #{$simple-tooltip-nub-size} / 2);
        left: calc(100% + #{$simple-tooltip-space});
        top: auto;
        transform: rotate(225deg);
    }
    &::after {
        right: auto;
        left: calc(100% + #{$simple-tooltip-nub-size / 2} + #{$simple-tooltip-space});
        top: calc(50% - #{$simple-tooltip-nub-offset});
        bottom: auto;
    }
}

[data-#{$simple-tooltip-prefix}-orientation="se"] {
    &::after {
        right: auto;
        left: calc(50% - #{$simple-tooltip-nub-offset});
        bottom: auto;
    }
}

[data-#{$simple-tooltip-prefix}-orientation="sw"] {
    &::after {
        right: calc(50% - #{$simple-tooltip-nub-offset});
        left: auto;
        bottom: auto;
    }
}

[data-#{$simple-tooltip-prefix}-orientation="ws"] {
    &::before {
        bottom: calc(50% - #{$simple-tooltip-nub-size / 2});
        right: calc(100% + #{$simple-tooltip-space});
        left: auto;
        top: auto;
        transform: rotate(45deg);
    }
    &::after {
        left: auto;
        right: calc(100% + #{$simple-tooltip-nub-size / 2} + #{$simple-tooltip-space});
        top: calc(50% - #{$simple-tooltip-nub-offset});
        bottom: auto;
    }
}

[data-#{$simple-tooltip-prefix}-orientation="w"] {
    &::before {
        bottom: calc(50% - #{$simple-tooltip-nub-size / 2});
        right: calc(100% + #{$simple-tooltip-space});
        left: auto;
        top: auto;
        transform: rotate(45deg);
    }
    &::after {
        left: auto;
        right: calc(100% + #{$simple-tooltip-nub-size / 2} + #{$simple-tooltip-space});
        position: absolute;
        overflow: hidden;
        white-space: nowrap;
        bottom: auto;
        top: calc(50% - (#{$simple-tooltip-padding} * 2) + #{$simple-tooltip-line-height} / 2);
        height: calc(#{$simple-tooltip-padding} * 2 + #{$simple-tooltip-line-height});
    }
}

[data-#{$simple-tooltip-prefix}-orientation="wn"] {
    &::before {
        bottom: calc(50% - #{$simple-tooltip-nub-size / 2});
        right: calc(100% + #{$simple-tooltip-space});
        left: auto;
        top: auto;
        transform: rotate(45deg);
    }
    &::after {
        left: auto;
        right: calc(100% + #{$simple-tooltip-nub-size / 2} + #{$simple-tooltip-space});
        bottom: calc(50% - #{$simple-tooltip-nub-offset});
        top: auto;
    }
}

[data-#{$simple-tooltip-prefix}-text-align="left"] {
    &::after {
        text-align: left;
    }
}

[data-#{$simple-tooltip-prefix}-text-align="center"] {
    &::after {
        text-align: center;
    }
}

[data-#{$simple-tooltip-prefix}-text-align="right"] {
    &::after {
        text-align: right;
    }
}