@mixin extjs-tip-ui(
    $ui-label,
    $ui-border-color: $tip-border-color,
    $ui-border-width: $tip-border-width,
    $ui-border-radius: $tip-border-radius,
    $ui-background-color: $tip-background-color,
    $ui-background-gradient: $tip-background-gradient,

    $ui-tool-spacing: $tip-tool-spacing,
    $ui-tool-background-image: $tip-tool-background-image,
    $ui-header-body-padding: $tip-header-body-padding,
    $ui-header-color: $tip-header-color,
    $ui-header-font-size: $tip-header-font-size,
    $ui-header-font-weight: $tip-header-font-weight,
    $ui-body-padding: $tip-body-padding,
    $ui-body-color: $tip-body-color,
    $ui-body-font-size: $tip-body-font-size,
    $ui-body-font-weight: $tip-body-font-weight,
    $ui-body-link-color: $tip-body-link-color,

    $ui-inner-border-width: 0,
    $ui-inner-border-color: #fff
) {
    @if $ui-border-radius != null {
        @include x-frame(
            $cls: 'tip',
            $ui: '#{$ui-label}',
            $border-radius: $ui-border-radius,
            $border-width: $ui-border-width,
            $background-color: $ui-background-color,
            $background-gradient: $ui-background-gradient,
            $table: true
        );
    }

    .#{$prefix}tip-#{$ui-label} {
        border-color: $ui-border-color;
        @if $ui-inner-border-width != 0 {
            @include inner-border(
                $width: $ui-inner-border-width,
                $color: $ui-inner-border-color
            );
        }

        .#{$prefix}tool-img {
            @if $ui-tool-background-image != $tool-background-image {
                background-image: theme-background-image($ui-tool-background-image);
            }
            @if $ui-background-gradient == null {
                // EXTJSIV-8846: partially transparent png images do not display correctly
                // in winXP/IE8m when the image element has a transparent background.
                // to fix this, we give the element the same background-color as the tooltip.
                background-color: $ui-background-color;
            }
        }
    }

    $ui-tool-margin: 0 0 0 $ui-tool-spacing;
    .#{$prefix}tip-header-#{$ui-label} {
        .#{$prefix}tool-after-title {
            margin: $ui-tool-margin;
        }

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}tool-after-title {
                margin: rtl($ui-tool-margin);
            }
        }

        .#{$prefix}tool-before-title {
            margin: rtl($ui-tool-margin);
        }

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}tool-before-title {
                margin: $ui-tool-margin;
            }
        }
    }

    .#{$prefix}tip-header-body-#{$ui-label} {
        padding: $ui-header-body-padding;
    }

    .#{$prefix}tip-header-text-container-#{$ui-label} {
        color: $ui-header-color;
        font-size: $ui-header-font-size;
        font-weight: $ui-header-font-weight;
    }

    .#{$prefix}tip-body-#{$ui-label} {
        padding: $ui-body-padding;
        color: $ui-body-color;
        font-size: $ui-body-font-size;
        font-weight: $ui-body-font-weight;
        a {
            color: $ui-body-link-color;
        }
    }
}

// TODO: refactor anchor to use an image instead of the border triangle technique
.#{$prefix}tip-anchor {
    position: absolute;

    overflow: hidden;

    height: 0;
    width: 0;

    border-style: solid;
    border-width: 5px;
    border-color: $tip-border-color;

    zoom: 1;
}

.#{$prefix}border-box .#{$prefix}tip-anchor {
    width: 10px;
    height: 10px;
}

.#{$prefix}tip-anchor-top {
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;

    @if $include_ie {
        _border-top-color: pink;
        _border-left-color: pink;
        _border-right-color: pink;
        _filter: chroma(color=pink);
    }
}

.#{$prefix}tip-anchor-bottom {
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;

    @if $include_ie {
        _border-bottom-color: pink;
        _border-left-color: pink;
        _border-right-color: pink;
        _filter: chroma(color=pink);
    }
}

.#{$prefix}tip-anchor-left {
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;

    @if $include-ie {
        _border-top-color: pink;
        _border-bottom-color: pink;
        _border-left-color: pink;
        _filter: chroma(color=pink);
    }
}

.#{$prefix}tip-anchor-right {
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;

    @if $include-ie {
        _border-top-color: pink;
        _border-bottom-color: pink;
        _border-right-color: pink;
        _filter: chroma(color=pink);
    }
}

@include extjs-tip-ui(
    $ui-label: 'default'
);

@if $include-ext-form-field-base {
    @include extjs-tip-ui(
        $ui-label: 'form-invalid',
        $ui-border-color: $tip-error-border-color,
        $ui-border-width: $tip-error-border-width,
        $ui-border-radius: $tip-error-border-radius,
        $ui-background-color: $tip-error-background-color,
        $ui-body-padding: $tip-error-body-padding,
        $ui-body-color: $tip-error-body-color,
        $ui-body-font-size: $tip-error-body-font-size,
        $ui-body-font-weight: $tip-error-body-font-weight,
        $ui-body-link-color: $tip-error-body-link-color,
        $ui-inner-border-color: $tip-error-inner-border-color,
        $ui-inner-border-width: $tip-error-inner-border-width
    );

    .#{$prefix}tip-body-form-invalid {
        background: 1px 1px no-repeat;
        background-image: theme-background-image('form/exclamation');
        li {
            margin-bottom: 4px;
            &.last {
                margin-bottom: 0;
            }
        }
    }
}