.tooltip {
    position: absolute;

    ul  {
        margin: 0;
    }
}

.tooltip--inline {
    position: relative !important;
    margin-bottom: var(--spacing-Half);
}

.tooltip--arrow {
    position: relative;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -var(--spacing-Half);
    border-left: var(--spacing-Half) solid transparent;
    border-right: var(--spacing-Half) solid transparent;
    border-bottom: var(--spacing-Half) solid var(--colors-ContrastDarkest);
}

.tooltip--asError .tooltip--arrow {
    border-bottom: var(--spacing-Half) solid var(--colors-Error);
}

.tooltip--inner {
    position: relative;
    padding: var(--spacing-Half);
    background: var(--colors-ContrastDarkest);
    color: white;
    box-shadow: 0px 0px 10px rgba(125, 125, 125, .2);
}

.tooltip--asError .tooltip--inner {
    background: var(--colors-Error);
}
