/// Global namespace for title bubble component
/// @access public
/// @group title button
/// @type string
$DBtitlebubble-namespace: "c-title-bubble" !default;

/// Background color for title bubble component
/// @access public
/// @group title button
/// @type string
$DBtitlebubble-background: color(gray, dark) !default;

/// Point width for title bubble component
/// @access public
/// @group title button
/// @type string
$DBtitlebubble-point-width: 5px !default;

// Title-bubble component. A tipsy-like tooltip component with default south direction
// @example html
//  <div class="c-title-bubble [c-title-bubble--n | --e | --w]" data-title="Some text">
//    {{content}}
//  </div>
.#{$DBtitlebubble-namespace} {
    display: inline-block;
    position: relative;

    &:before, &:after {
        z-index: 500;
    }

    &:after {
        content: attr(data-title);
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        white-space: nowrap;
        margin-top: $DBtitlebubble-point-width;
        padding: 7px 9px;

        font-size: 11px;
        font-weight: 500;
        line-height: 1.4;

        color: color(white);
        border-radius: 3px;
        background-color: $DBtitlebubble-background;

        transform: translateX(-50%);
        transform-origin: 50% 50%;
    }

    &:before {
        content: "";
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        margin-top: -($DBtitlebubble-point-width);
        margin-left: -$DBtitlebubble-point-width;

        border: 5px solid transparent;
        border-bottom-color: $DBtitlebubble-background;
    }

    &--respect-line-break {
        &:after {
            white-space: pre-line;
        }
    }

    &--n {
        &:after {
            top: auto;
            bottom: 100%;
            margin-bottom: $DBtitlebubble-point-width;
        }

        &:before {
            top: auto;
            bottom: 100%;
            margin-bottom: -$DBtitlebubble-point-width;

            border-top-color: $DBtitlebubble-background;
            border-bottom-color: transparent;
        }
    }

    &--e {
        &:after {
            top: 50%;
            left: 100%;
            margin-top: 0;
            margin-left: $DBtitlebubble-point-width;

            transform: translateY(-50%);
        }

        &:before {
            top: 50%;
            left: 100%;
            margin-top: -$DBtitlebubble-point-width;

            border-right-color: $DBtitlebubble-background;
            border-bottom-color: transparent;
        }
    }

    &--w {
        &:after {
            top: 50%;
            right: 100%;
            left: auto;
            margin-top: 0;
            margin-right: $DBtitlebubble-point-width;

            transform: translateY(-50%);
        }

        &:before {
            top: 50%;
            right: 100%;
            left: auto;
            margin-top: -$DBtitlebubble-point-width;
            margin-right: -$DBtitlebubble-point-width;

            border-bottom-color: transparent;
            border-left-color: $DBtitlebubble-background;
        }
    }

    &:hover, &:focus, &.is-child-focused {
        &:before, &:after {
            display: block;
        }
    }
}
