:root {
    --theme-controller-zindex: 1000;
    --datagrid-menu-zindex: 910;
    --datagrid-sidebar-zindex: 900;
    --datagrid-scrollbars-zindex: 800;
    --mmt-tooltip-zindex: 10;
    --datagrid-drag-drop-zindex: 5;
    --datagrid-resize-zindex: 1;
    --color-splitter: color-mix(in oklab, var(--color-base-content) 50%, #0000);
    --color-splitter-active: color-mix(in oklab, var(--color-base-content) 50%, #ffff);
    --color-btn-hover: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
}

.mmt-tooltip-container {
    background: var(--color-base-200);
    padding: 5px 10px;
    border-radius: 4px;
    pointer-events: none; /* Prevent interfering with mouse events */
    font-size: 12px;
    white-space: nowrap;
    opacity: 0; /* Default to invisible */
    visibility: hidden; /* Prevent interaction when invisible */
    transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Delay visibility removal */
    position: fixed; /* Keep it above other content and adjust position */
    z-index: var(--mmt-tooltip-zindex); /* Ensure it's on top */
}

.mmt-tooltip-container[data-visible="true"] {
    opacity: 1;
    visibility: visible; /* Show tooltip */
    transition: opacity 0.3s ease; /* No delay when becoming visible */
}

.mmt-visible-on-hover {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.mmt-btn {
    user-select: none;
    border-style: solid;
}

.mmt-btn:hover {
    background-color: var(--color-btn-hover);
}

.mmt-btn-disabled {
    opacity: 0.5;
    /*cursor: not-allowed;*/
}

/* When parent is hovered, show the child elements with this class */
*:hover > .mmt-visible-on-hover {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
}

.mmt-selected {
  background-color: var(--color-base-300);
  border-radius: .25rem;
}

.icon-32 {
    width: 32px;
    height: 32px;
}

.icon-32 svg {
    width: 100%;
    height: 100%;
}

.icon-24 {
    width: 24px;
    min-width: 24px;
    height: 24px;
    margin-top: auto;
    margin-bottom: auto;
}

.icon-24 svg {
    width: 100%;
    height: 100%;
}

.icon-20 {
    width: 20px;
    min-width: 20px;
    height: 20px;
    margin-top: auto;
    margin-bottom: auto;
}

.icon-20-inline {
    display: inline-block;
    width: 20px;
    min-width: 20px;
    height: 20px;
    padding-top: 4px;
}

.icon-16 {
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin-top: auto;
    margin-bottom: 4px;
}

.icon-16-inline {
    display: inline-block;
    width: 16px;
    min-width: 16px;
    height: 16px;
    padding-top: 5px;
}

.icon-bool {
    display: block;
    width: 20px;
    height: 20px;
    margin: auto;
}

.icon-btn {
    cursor: pointer;
}


.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}