:root {
    --background-surface: #fff;
    --color-surface: #000;
}

/* Tryb ciemny */
[data-theme="dark"] {
    --background-surface: #000;
    --color-surface: #fff;
}

[data-tooltip]{
    position: relative;
}

/* Podstawowy wygląd tooltipa */
.tooltip__label {
    background-color: var(--background-surface);
    color: var(--color-surface);
    padding: 5px 10px;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.3s ease-out;
    white-space: nowrap;
    z-index: 1;
    font-family: roboto-mono, monospace;
    font-size: 14px;
    line-height: 21px;
    border-radius: 0px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    font-family: 'Robot Mono', Sans-serif;
    font-size: 14px;
    line-height: 21px;
}

/* Ukrycie domyślne */
.tooltip__label--hidden {
    left: -99999px;
    opacity: 0;
}

/* Pozycjonowanie */
.tooltip__label.tooltip__label--position-bc {
    left: 50%;
    margin-top: 5px;
    top: 100%;
    transform: translateX(-50%);
}

.tooltip__label.tooltip__label--position-cl {
    left: auto;
    margin-right: 5px;
    right: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* Specyficzne motywy */
.tooltip__label--theme-white {
    background-color: #fff !important;
    color: #000 !important;
}

.tooltip__label--theme-dark {
    background-color: #000 !important;
    color: #fff !important;
}