@include exports("tooltip/layout") {

    .k-tooltip {
        @include border-radius( $tooltip-border-radius );
        margin: 0;
        padding: $tooltip-padding-y $tooltip-padding-x;
        // max-width: $tooltip-max-width;
        border-width: $tooltip-border-width;
        border-style: solid;
        box-sizing: border-box;
        background-repeat: repeat-x;
        outline: 0;
        font-family: $tooltip-font-family;
        font-size: $tooltip-font-size;
        line-height: $tooltip-line-height;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        position: absolute;
        z-index: 12000;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;
    }

    .k-tooltip-icon {
        margin-inline-end: $icon-spacing;
        flex-shrink: 0;
    }

    .k-tooltip-title {
        margin-bottom: .25em;
        font-size: $tooltip-title-font-size;
        line-height: $tooltip-title-line-height;
    }

    .k-tooltip-content {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .k-tooltip-button {
        margin-inline-start: $icon-spacing;
        flex-shrink: 0;

        .k-icon {
            color: inherit;
            vertical-align: top;
        }
    }


    // Callout
    .k-callout {
        width: ($tooltip-callout-size * 2);
        height: ($tooltip-callout-size * 2);
        border-width: $tooltip-callout-size;
        border-style: solid;
        border-color: transparent;
        box-sizing: border-box;
        position: absolute;
        pointer-events: none;
    }

    // TODO:
    // Some implementations rely on margin + transform-rotate to position callout
    // Remove margin tweaking and uncomment when their implementation is fixed.

    .k-callout-n {
        margin-left: -$tooltip-callout-size;
        border-bottom-color: currentColor;
        // top: 0;
        top: (-$tooltip-callout-size * 2);
        left: 50%;
        // transform: translate(-50%, -100%);
        pointer-events: none;
    }
    .k-callout-e {
        margin-top: -$tooltip-callout-size;
        border-left-color: currentColor;
        top: 50%;
        // right: 0;
        right: (-$tooltip-callout-size * 2);
        // transform: translate(100%, -50%);
        pointer-events: none;
    }
    .k-callout-s {
        margin-left: -$tooltip-callout-size;
        border-top-color: currentColor;
        // bottom: 0;
        bottom: (-$tooltip-callout-size * 2);
        left: 50%;
        // transform: translate(-50%, 100%);
        pointer-events: none;
    }
    .k-callout-w {
        margin-top: -$tooltip-callout-size;
        border-right-color: currentColor;
        top: 50%;
        // left: 0;
        left: (-$tooltip-callout-size * 2);
        // transform: translate(-100%, -50%);
        pointer-events: none;
    }

}