.cds-tooltip-container {
    position: fixed;
    pointer-events: none;
    background-color: var(--cds-color-primary);
    padding: 8px 12px;
    border-radius: 8px;
    max-width: 450px;
    z-index: 100;
    box-shadow: 10px 10px 4px #00000030;
}

.cds-tooltip-arrow {
    position: absolute;
    min-width: 12px;
    min-height: 12px;
    left: 48%;
    top: -6px;
    rotate: 45deg;
    background-color: var(--cds-color-primary);
}

.cds-tooltip-arrow-down {
    position: absolute;
    min-width: 12px;
    min-height: 12px;
    left: 48%;
    bottom: -6px;
    rotate: 45deg;
    background-color: var(--cds-color-primary);
}

.cds-tooltip-arrow-left {
    position: absolute;
    min-width: 12px;
    min-height: 12px;
    right: -4px;
    top: calc(50% - 6px); /* metade da altura da seta (12px / 2), sem usar transform */
    rotate: 135deg;
    background-color: var(--cds-color-primary);
}

.cds-tooltip-container.auto .cds-tooltip-arrow-left {
    border-style: solid;
    border-color: var(--cds-color-disabled);
    border-width: 1px 0 0 1px;
    background-color: var(--cds-color-white);
}

.cds-tooltip-container a {
    font-size: 12px;
    color: var(--cds-color-white);
    text-align: center;
    text-decoration: none;
    white-space: pre-line;
}

.cds-tooltip-container.auto {
    background-color: var(--cds-color-white);
    border: 1px solid var(--cds-color-disabled);
}

.cds-tooltip-container.auto .cds-tooltip-arrow {
    border-style: solid;
    border-color: var(--cds-color-disabled);
    border-width: 1px 0 0 1px;
    background-color: var(--cds-color-white);
}

.cds-tooltip-container.auto .cds-tooltip-arrow-down {
    background-color: var(--cds-color-white);
}

.cds-tooltip-container.auto a {
    color: var(--cds-color-primary);
    font-weight: 500;
}