.titlebar {
    background-color: var(--white-color-back);
    height: 2em;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 5;
    -webkit-app-region: drag;
    user-select: none;
    padding-left: 1em;
    color: var(--grey-color);

    &.dark {
        background-color: var(--back-black-color);
    }

    & svg {
        color: #4888C7;
        fill: #4888C7;
    }

    & span.title {
        font-size: 15px;
        display: inline-flex;
        animation: color-change 6s infinite;
        font-weight: 700;
    }

    & .misc {
        display: flex;
        align-items: center;
        height: 100%;
        margin-left: auto;
    }
    & ul.buttons {
        display: flex;
        list-style: none;
        height: 100%;
        position: absolute;
        right: 0;

        & svg {
            height: 0.75em;

            &.minimize {
                padding: 0.15em;
            }
        }

        & li {
            align-items: center;
            display: flex;
            justify-content: center;
            -webkit-app-region: no-drag;
            width: 3em;

            &:hover {
                background-color: color(var(--grey-color) a(5%));
            }

            &:nth-child(3):hover {
                background-color: color(var(--red-color));

                & svg polygon {
                    fill: var(--white-color-back) !important;
                }
            }
        }
    }

    &.dark ul.buttons li {
        &:hover {
            background-color: color(var(--grey-color) a(35%)) !important;
        }

        &:nth-child(3):hover {
            background-color: color(var(--red-color)) !important;

            & svg polygon {
                fill: var(--back-black-color) !important;
            }
        }
    }
}

@keyframes color-change {
    0% {
        color: #3A4368;
        fill: #3A4368;
    }
    50% {
        color: #5396d8;
        fill: #5396d8;
    }
    100% {
        color: #4888C7;
        fill: #4888C7;
    }
}