$zt_border_color: #FFF;
$zt_border_width: 2px;
$zt_border_radius: 15px;
$zt_box_shadow: 0 0 6px rgba(0, 0, 0, 0.6);

$zt_content_background: #000;
$zt_content_color: #FFF;
$zt_content_font_size: 13px;
$zt_content_line_height: 1.4;
$zt_content_padding: 15px;

$zt_arrow_width: 28px;

$zt_close_button_background: #222;
$zt_close_button_border_radius: 15px;
$zt_close_button_color: #FFF;

$zt_close_button_hover_background: #FFF;
$zt_close_button_hover_color: #000;

@use "sass:meta";

$zt_arrow_width: 20px !default;
$zt_border_width: 0 !default;
$zt_border_color: $zt_content_background !default;
$zt_max_width: 250px;

.Zebra_Tooltip {
    background: transparent;
    position: absolute;
    z-index: 8000;

    .Zebra_Tooltip_Message {
        border-color: $zt_border_color;
        background: $zt_content_background;
        @if meta.variable-exists(zt_border_radius) { border-radius: $zt_border_radius; }
        border-style: solid;
        border-width: $zt_border_width;
        @if meta.variable-exists(zt_box_shadow) { box-shadow: $zt_box_shadow; }
        color: $zt_content_color;
        @if meta.variable-exists(zt_content_font_size) { font-size: $zt_content_font_size; }
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        @if meta.variable-exists(zt_content_line_height) { line-height: $zt_content_line_height; }
        *margin-right: 0;
        max-width: $zt_max_width;
        padding: $zt_content_padding;
        position: relative;
        @if meta.variable-exists(zt_content_align) { text-align: $zt_content_align; }
        _width: expression(document.body.clientWidth > #{$zt_max_width} ? '#{$zt_max_width}': 'auto'); /* max-width for IE6 */

        &.Zebra_Tooltip_Has_Close {
            padding-right: 23px;
        }
    }

    .Zebra_Tooltip_Arrow {
        position: absolute;
        width: $zt_arrow_width;
        height: calc($zt_arrow_width / 2);
        overflow: hidden;

        &.Zebra_Tooltip_Arrow_Bottom {
            bottom: $zt_border_width;

            div {
                top: 0;
                border-color: $zt_content_background transparent transparent;
                _border-bottom-color: pink;

                &.Zebra_Tooltip_Arrow_Border {
                    border-color: $zt_border_color transparent transparent;
                }
            }
        }

        &.Zebra_Tooltip_Arrow_Top {
            top: $zt_border_width;

            div {
                bottom: 0;
                border-color: transparent transparent $zt_content_background;
                _border-top-color: pink;

                &.Zebra_Tooltip_Arrow_Border {
                    border-color: transparent transparent $zt_border_color;
                }
            }
        }

        div {
            position: absolute;
            border-style: solid;
            border-width: (calc($zt_arrow_width / 2) - ($zt_border_width * 2));
            width: 0;
            height: 0;
            left: ($zt_border_width * 2);
            _border-left-color: pink;
            _border-right-color: pink;
            _filter: chroma(color=pink);

            &.Zebra_Tooltip_Arrow_Border {
                border-width: calc($zt_arrow_width / 2);
                @if meta.variable-exists(zt_box_shadow) { box-shadow: $zt_box_shadow; }
                left: 0;
            }
        }
    }

    .Zebra_Tooltip_Close {
        @if meta.variable-exists(zt_close_button_color) { color: $zt_close_button_color; }
        @if meta.variable-exists(zt_close_button_background) { background: $zt_close_button_background; }
        @if meta.variable-exists(zt_close_button_border_radius) { border-radius: $zt_close_button_border_radius; }
        font-family: Arial, sans-serif;
        font-size: 18px;
        line-height: 1;
        padding: 0 4px;
        position: absolute;
        right: 2px;
        text-decoration: none;
        top: 2px;

        &:hover {
            @if meta.variable-exists(zt_close_button_hover_color) and (not meta.variable-exists(zt_close_button_color) or $zt_close_button_hover_color != $zt_close_button_color) { color: $zt_close_button_hover_color; }
            @if meta.variable-exists(zt_close_button_hover_background) and (not meta.variable-exists(zt_close_button_background) or $zt_close_button_hover_background != $zt_close_button_background) { background: $zt_close_button_hover_background; }
            @if meta.variable-exists(zt_close_button_hover_border_radius) and (not meta.variable-exists(zt_close_button_border_radius) or $zt_close_button_hover_border_radius != $zt_close_button_border_radius) { border-radius: $zt_close_button_hover_border_radius; }
        }
    }
}