[aria-label][role~="tooltip"] {
    position: relative;
}

[aria-label][role~="tooltip"]::before,
[aria-label][role~="tooltip"]::after {
    transform                  : translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility        : hidden;
    will-change                : transform;
    opacity                    : 0;
    pointer-events             : none;
    transition                 : all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
    position                   : absolute;
    box-sizing                 : border-box;
    z-index                    : 10;
    transform-origin           : top;
}

[aria-label][role~="tooltip"]::before {
    background-size: 100% auto !important;
    content        : "";
}

[aria-label][role~="tooltip"]::after {
    background    : #ffffff;
    box-shadow    : 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
    border-radius : 4px;
    color         : #161616;
    content       : attr(aria-label);
    font-size     : 14px;
    font-style    : normal;
    font-weight   : 450;
    line-height   : 22px;
    text-transform: var(--microtip-text-transform, none);
    padding       : 10px 11px;
    white-space   : nowrap;
    box-sizing    : content-box;
}

[aria-label][role~="tooltip"]:hover::before,
[aria-label][role~="tooltip"]:hover::after,
[aria-label][role~="tooltip"]:focus::before,
[aria-label][role~="tooltip"]:focus::after {
    opacity       : 1;
    pointer-events: auto;
}



/* ------------------------------------------------
    [2] Position Modifiers
  -------------------------------------------------*/

[role~="tooltip"][data-microtip-position|="top"]::before,
[role~="tooltip"][data-microtip-position|="bottom"]::before,
[role~="tooltip"][data-microtip-position|="left"]::before,
[role~="tooltip"][data-microtip-position|="right"]::before {
    content: " ";
    width  : 7px;
    height : 16px;
    border : 8px solid white;
    z-index: 99;
}

[role~="tooltip"][data-microtip-position|="top"]::after {
    margin-bottom: 11px;
}

[role~="tooltip"][data-microtip-position|="top"]::before {
    transform    : translate3d(-50%, 0, 0);
    bottom       : 100%;
    left         : 50%;
    top          : -12px;
    border-left  : 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right : 8px solid transparent;
}

[role~="tooltip"][data-microtip-position|="top"]:hover::before {
    transform: translate3d(-50%, -5px, 0);
}

[role~="tooltip"][data-microtip-position|="top"]::after {
    transform: translate3d(-50%, 0, 0);
    bottom   : 100%;
    left     : 50%;
}

[role~="tooltip"][data-microtip-position="top"]:hover::after {
    transform: translate3d(-50%, -5px, 0);
}

/* ------------------------------------------------
    [2.1] Top Left
  -------------------------------------------------*/
[role~="tooltip"][data-microtip-position="top-left"]::after {
    transform: translate3d(calc(-100% + 16px), 0, 0);
    bottom   : 100%;
}

[role~="tooltip"][data-microtip-position="top-left"]:hover::after {
    transform: translate3d(calc(-100% + 16px), -5px, 0);
}


/* ------------------------------------------------
    [2.2] Top Right
  -------------------------------------------------*/
[role~="tooltip"][data-microtip-position="top-right"]::after {
    transform: translate3d(calc(0% + -16px), 0, 0);
    bottom   : 100%;
}

[role~="tooltip"][data-microtip-position="top-right"]:hover::after {
    transform: translate3d(calc(0% + -16px), -5px, 0);
}


/* ------------------------------------------------
    [2.3] Bottom
  -------------------------------------------------*/

[role~="tooltip"][data-microtip-position|="bottom"]::after {
    margin-top: 11px;
}

[role~="tooltip"][data-microtip-position|="bottom"]::before {
    transform   : translate3d(-50%, -10px, 0);
    bottom      : auto;
    left        : 50%;
    top         : 24px;
    border-left : 8px solid transparent;
    border-top  : 8px solid transparent;
    border-right: 8px solid transparent;
}

[role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
    transform: translate3d(-50%, 0, 0);
}

[role~="tooltip"][data-microtip-position|="bottom"]::after {
    transform: translate3d(-50%, -10px, 0);
    top      : 100%;
    left     : 50%;
}

[role~="tooltip"][data-microtip-position="bottom"]:hover::after {
    transform: translate3d(-50%, 0, 0);
}


/* ------------------------------------------------
    [2.4] Bottom Left
  -------------------------------------------------*/
[role~="tooltip"][data-microtip-position="bottom-left"]::after {
    transform: translate3d(calc(-100% + 16px), -10px, 0);
    top      : 100%;
}

[role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {
    transform: translate3d(calc(-100% + 16px), 0, 0);
}


/* ------------------------------------------------
    [2.5] Bottom Right
  -------------------------------------------------*/
[role~="tooltip"][data-microtip-position="bottom-right"]::after {
    transform: translate3d(calc(0% + -16px), -10px, 0);
    top      : 100%;
}

[role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {
    transform: translate3d(calc(0% + -16px), 0, 0);
}


/* ------------------------------------------------
    [2.6] Left
  -------------------------------------------------*/
[role~="tooltip"][data-microtip-position="left"]::before,
[role~="tooltip"][data-microtip-position="left"]::after {
    bottom   : auto;
    left     : auto;
    right    : 100%;
    top      : 50%;
    transform: translate3d(10px, -50%, 0);
}

[role~="tooltip"][data-microtip-position="left"]::before {
    border-right : 8px solid transparent;
    border-top   : 8px solid transparent;
    border-bottom: 8px solid transparent;
    margin-right : -3px;
    margin-bottom: 0;
}

[role~="tooltip"][data-microtip-position="left"]::after {
    margin-right: 11px;
    z-index     : 1
}

[role~="tooltip"][data-microtip-position="left"]:hover::before,
[role~="tooltip"][data-microtip-position="left"]:hover::after {
    transform: translate3d(0, -50%, 0);
}

/* ------------------------------------------------
    [2.7] Right
  -------------------------------------------------*/
[role~="tooltip"][data-microtip-position="right"]::before,
[role~="tooltip"][data-microtip-position="right"]::after {
    bottom   : auto;
    left     : 100%;
    top      : 50%;
    transform: translate3d(-10px, -50%, 0);
}

[role~="tooltip"][data-microtip-position="right"]::before {
    margin-bottom: 0;
    margin-left  : -3px;
    border-left  : 8px solid transparent;
    border-top   : 8px solid transparent;
    border-bottom: 8px solid transparent;
}

[role~="tooltip"][data-microtip-position="right"]::after {
    margin-left: 11px;
}

[role~="tooltip"][data-microtip-position="right"]:hover::before,
[role~="tooltip"][data-microtip-position="right"]:hover::after {
    transform: translate3d(0, -50%, 0);
}

/* ------------------------------------------------
    [3] Size
  -------------------------------------------------*/
[role~="tooltip"][data-microtip-size="small"]::after {
    white-space: initial;
    width      : 80px;
}

[role~="tooltip"][data-microtip-size="medium"]::after {
    white-space: initial;
    width      : 150px;
}

[role~="tooltip"][data-microtip-size="large"]::after {
    white-space: initial;
    width      : 260px;
}