@charset "UTF-8";

headerbar, .titlebar {
    button.titlebutton {
        &.close {
            background-image: url('assets/close-normal.svg');
        }
        &.close:hover {
            background-image: url('assets/close-hover.svg');
        }
        &.close:active {
            background-image: url('assets/close-active.svg');
        }

        &.close:backdrop {
            background-image: url('assets/close-backdrop-normal.svg');
        }
        &.close:backdrop:hover {
            background-image: url('assets/close-backdrop-hover.svg');
        }
        &.close:backdrop:active {
            background-image: url('assets/close-backdrop-active.svg');
        }

        &.maximize {
            background-image: url('assets/maximize-normal.svg');
        }
        &.maximize:hover {
            background-image: url('assets/maximize-hover.svg');
        }
        &.maximize:active {
            background-image: url('assets/maximize-active.svg');
        }

        &.maximize:backdrop {
            background-image: url('assets/maximize-backdrop-normal.svg');
        }
        &.maximize:backdrop:hover {
            background-image: url('assets/maximize-backdrop-hover.svg');
        }
        &.maximize:backdrop:active {
            background-image: url('assets/maximize-backdrop-active.svg');
        }

        &.minimize {
            background-image: url('assets/minimize-normal.svg');
        }
        &.minimize:hover {
            background-image: url('assets/minimize-hover.svg');
        }
        &.minimize:active {
            background-image: url('assets/minimize-active.svg');
        }

        &.minimize:backdrop {
            background-image: url('assets/minimize-backdrop-normal.svg');
        }
        &.minimize:backdrop:hover {
            background-image: url('assets/minimize-backdrop-hover.svg');
        }
        &.minimize:backdrop:active {
            background-image: url('assets/minimize-backdrop-active.svg');
        }
    }

    .maximized & {
        button.titlebutton {
            &.maximize {
                background-image: url('assets/maximized-normal.svg');
            }
            &.maximize:hover {
                background-image: url('assets/maximized-hover.svg');
            }
            &.maximize:active {
                background-image: url('assets/maximized-active.svg');
            }

            &.maximize:backdrop {
                background-image: url('assets/maximized-backdrop-normal.svg');
            }
            &.maximize:backdrop:hover {
                background-image: url('assets/maximized-backdrop-hover.svg');
            }
            &.maximize:backdrop:active {
                background-image: url('assets/maximized-backdrop-active.svg');
            }
        }
    }
}
