:root {
    /* TauriProvider.jsx sets to 28px */
    --titlebar-height: 0px;
}

.titlebar {
    height: var(--titlebar-height);
    background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-8));
    display: flex;
    justify-content: space-between;
    position: fixed;
    user-select: none;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.titlebarButton {
    transition-duration: 200ms;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 47px;
    height: var(--titlebar-height);

    .titlebarButton>svg {
        fill: light-dark(var(--mantine-color-black), var(--mantine-color-white));
    }
}

.titlebar>div:nth-of-type(2) {
    display: flex;
    justify-content: flex-end;
}

.titlebarIcon {
    margin: 0 5px 0 10px;
    vertical-align: middle;

    /* @mixin light {
        filter: grayscale(100%) contrast(0);
    } */
}

.verticalAlign {
    vertical-align: middle;
}

.titlebarLabel {
    display: inline;
    margin-left: 5px;
    /* margin-left: 46 * 3 - 16 - 7.5;  // for center labels */
    line-height: var(--titlebar-height);
}

.titlebarDefaultHover {
    &:hover {
        background: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
    }

    &.titlebarDefaultHover:active {
        background: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4));
    }
}

.titlebarCloseHover {
    &:hover {
        background: #e81123;
    }

    /* This was commented out as it was found that light theme was broken */
    /* &.titlebarCloseHover>svg {
        fill: white;
    } */

    &.titlebarCloseHover:active {
        background: light-dark(#8b0a14, #f1707a);
    }
}
