/**
 * wenk - Lightweight tooltip for the greater good
 * @version v1.0.6
 * (c) 2018 Tiaan du Plessis @tiaanduplessis |
 * @link https://tiaanduplessis.github.io/wenk/
 * @license MIT
 */
 :root {
    --font-size: 13px;
    --font-color: #fff;
    --bg-color: rgba(17, 17, 17, .8);
    --length-small: 80px;
    --length-medium: 150px;
    --length-large: 260px;
}

[data-wenk] {
    position: relative;
    &:after {
        position: absolute;
        font-size: var(--font-size);
        border-radius: .4rem;
        content: attr(data-wenk);
        padding: .8rem;
        background-color: var(--bg-color);
        box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
        color: var(--font-color);
        line-height: 1.25rem;
        text-align: left;
        z-index: 1;
        pointer-events: none;
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: all .3s;
        bottom: 100%;
        left: 50%;
        transform: translate(-50%, 10px);
        white-space: pre;
        width: auto;
    }
    &:after {
        opacity: 0;
    }
    &:hover {
        overflow: visible;
        &:after {
            display: block;
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -10px);
        }
    }

    &.wenk--bottom, &[data-wenk-pos="bottom"] {
        &:after {
            bottom: auto;
            top: 100%;
            left: 50%;
            transform: translate(-50%, -10px);
        }
        &:hover {
            &:after {
                transform: translate(-50%, 10px);
            }
        }
    }

    &.wenk--left, &[data-wenk-pos="left"] {
        &:after {
            bottom: auto;
            left: auto;
            top: 50%;
            right: 100%;
            transform: translate(10px, -50%);
        }
        &:hover {
            &:after {
                transform: translate(-10px, -50%);
            }
        }
    }

    &.wenk--right, &[data-wenk-pos="right"] {
        &:after {
            bottom: auto;
            top: 50%;
            left: 100%;
            transform: translate(-10px, -50%);
        }
        &:hover {
            &:after {
                transform: translate(10px, -50%);
            }
        }
    }

    &[data-wenk-length="small"]:after, &.wenk-length--small:after {
        white-space: normal;
        width: var(--length-small);
    }
    &[data-wenk-length="medium"]:after, &.wenk-length--medium:after {
        white-space: normal;
        width: var(--length-medium);
    }
    &[data-wenk-length="large"]:after, &.wenk-length--large:after {
        white-space: normal;
        width: var(--length-large);
    }
    &[data-wenk-length="fit"]:after, &.wenk-length--fit:after {
        white-space: normal;
        width: 100%;
    }

    &[data-wenk-align="right"]:after, &.wenk-align--right:after {
        text-align: right;
    }
    &[data-wenk-align="center"]:after, &.wenk-align--center:after {
        text-align: center;
    }
}

[data-wenk=""]:after {
    visibility: hidden !important;
}