@import "~styles/variables";

titlebar {
    background: var(--titlebar-background);
    height: $titlebar-height;
    max-height: $titlebar-height;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: stretch;
    user-select: none;
    cursor: default;
    -webkit-app-region: drag;

    .titlebar-icon {
        padding-left: 0.5rem;
        display: flex;
        align-items: center;

        img {
            max-height: 18px;
        }
    }

    integrated-main-menu {
        z-index: 1000;
    }

    .title {
        position: absolute;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        left: 0;
    }

    .window-controls {
        display: flex;
        -webkit-app-region: no-drag;
        z-index: 1000;

        // To counteract margin-right of .actions when window controls are on the right side
        margin-left: -1rem;

        &.order-first {
            margin-left: 0;
        }

        i {
            display: flex;
            align-items: center;
            font-size: 1rem;
            padding-right: 1rem;
            padding-left: 1rem;
            cursor: default;

            &:hover {
                background: var(--hover-color);
            }
        }
    }

    .actions {
        -webkit-app-region: no-drag;
        display: flex;
        z-index: 1000;
        margin-left: auto;
        margin-right: 1rem;

        .action-icon {
            width: 30px;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            display: flex;
            justify-content: center;
            align-items: center;

            &:not(:last-child) {
                margin-right: 0.5rem;
            }

            &:hover {
                background: var(--hover-color);
            }
        }
    }
}
