.windows-titlebar
  position absolute
  top 0
  left 0
  width 100%
  height 24px
  display flex
  align-items center
  background-color $TitleBarBg
  border-top 1px solid #000
  font-size 12px
  color $TitleBarText
  font-family $MainFont

.windows-titlebar .events
  top 0
  left 50%
  margin-left -78px

.icon
  height 20px
  width  20px
  margin-left auto
  margin-top 5px

.windows-titlebar-title
  top initial !important
  padding-left 12px !important
  padding-top 5px
  font-size 14px !important
  color inherit !important
  text-shadow black 0 0 0
  width auto
  margin-right -64px
  opacity 0.97

.window-controls
  margin-left auto
  display flex
  align-items center
  -webkit-app-region no-drag

.window-control
  padding 0
  height 24px
  width 30px
  cursor initial !important
  opacity 0.97

.window-close:hover
  opacity 1
  background-color rgba(232, 17, 35, .9) !important

.window-minimize,
.window-maximize
  opacity 0.87

.window-minimize:hover,
.window-maximize:hover
  opacity 1
  background-color #3a3939 !important

.control-icon
  width 100%
  height 100%

.window-close-icon
  background url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%
  background-size 10px
  filter $TbarIconFilter

.window-close:hover .window-close-icon
  background url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%
  background-size 10px
  filter none

.window-maximize-icon
  background url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M11 0v11H0V0h11zM9.899 1.101H1.1V9.9h8.8V1.1z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%
  background-size 10px
  filter $TbarIconFilter

.window-maximize:hover .window-maximize-icon
  background url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M11 0v11H0V0h11zM9.899 1.101H1.1V9.9h8.8V1.1z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%
  background-size 10px
  filter none

.window-umaximize .window-maximize-icon
  background url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M11 8.798H8.798V11H0V2.202h2.202V0H11v8.798zm-3.298-5.5h-6.6v6.6h6.6v-6.6zM9.9 1.1H3.298v1.101h5.5v5.5h1.1v-6.6z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%
  background-size 10px
  filter $TbarIconFilter

.window-umaximize:hover .window-maximize-icon
  background url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M11 8.798H8.798V11H0V2.202h2.202V0H11v8.798zm-3.298-5.5h-6.6v6.6h6.6v-6.6zM9.9 1.1H3.298v1.101h5.5v5.5h1.1v-6.6z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%
  background-size 10px
  filter none

.window-minimize-icon
  background url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M11 4.399V5.5H0V4.399h11z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%
  background-size 10px
  filter $TbarIconFilter

.window-minimize:hover .window-minimize-icon
  background url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M11 4.399V5.5H0V4.399h11z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%
  background-size 10px
  filter none
