:host {
    /*@doc Define o tamanho do triângulo da seta do tooltip.*/
    --ez-tooltip--triangle-size: var(--space--8);
    
    /*@doc Define o z-index do tooltip.*/
    --ez-tooltip--z-index: var(--elevation--24);
    
    /*@doc Define o padding interno do tooltip.*/
    --ez-tooltip--padding: var(--space--4) var(--space--8);
    
    /*@doc Define o border-radius do tooltip.*/
    --ez-tooltip--border-radius: var(--border--radius-8);
    
    /*@doc Define a família da fonte do tooltip.*/
    --ez-tooltip--font-family: var(--font--pattern);
    
    /*@doc Define o tamanho da fonte do tooltip.*/
    --ez-tooltip--font-size: var(--font-size--small);
    
    /*@doc Define o peso da fonte do tooltip.*/
    --ez-tooltip--font-weight: var(--font-weight--regular);
    
    width: 100%;
}

.tooltip {
    position: absolute;
    z-index: var(--ez-tooltip--z-index);
    padding: var(--ez-tooltip--padding);
    border-radius: var(--ez-tooltip--border-radius);
    box-sizing: border-box;
    font-family: var(--ez-tooltip--font-family);
    font-size: var(--ez-tooltip--font-size);
    font-weight: var(--ez-tooltip--font-weight);
    text-align: center;
    width: max-content;
    /* Initially hide the tooltip */
    display: none;
}

.tooltip[data-strategy="fixed"] {
    position: fixed;
}

.arrow {
    position: absolute;
    width: var(--ez-tooltip--triangle-size);
    height: var(--ez-tooltip--triangle-size);
    transform: rotate(45deg);
}

.tooltip[data-type="default"] {
    background: var(--color--petroleum-600);
    color: var(--color--gray-70);
}

.tooltip[data-type="default"] .arrow {
    background: var(--color--petroleum-600);
}

.tooltip[data-type="error"] {
    background: var(--color--red-600);
    color: var(--color--red-100);
}

.tooltip[data-type="error"] .arrow {
    background: var(--color--red-600);
}

.tooltip[data-type="success"] {
    background: var(--color--green-600);
    color: var(--color--green-100);
}

.tooltip[data-type="success"] .arrow {
    background: var(--color--green-600);
}

.tooltip[data-type="warning"] {
    background: var(--color--yellow-600);
    color: var(--color--yellow-100);
}

.tooltip[data-type="warning"] .arrow {
    background: var(--color--yellow-600);
}

.tooltip[data-active="false"] {
    display: none !important;
}