// ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ Titlebar                 ║ SVGs                                                                                    ║
// ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝

:root {
  --size: 12px;
  --titlebar-minimize: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Crect x='3' y='7.5' width='10' height='1' rx='0.5' fill='%23212121'/%3E%3C/svg%3E");
  --titlebar-maximize: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.5 3C3.67157 3 3 3.67157 3 4.5V11.5C3 12.3284 3.67157 13 4.5 13H11.5C12.3284 13 13 12.3284 13 11.5V4.5C13 3.67157 12.3284 3 11.5 3H4.5ZM4.5 4H11.5C11.7761 4 12 4.22386 12 4.5V11.5C12 11.7761 11.7761 12 11.5 12H4.5C4.22386 12 4 11.7761 4 11.5V4.5C4 4.22386 4.22386 4 4.5 4Z' fill='%23212121'/%3E%3C/svg%3E");
  --titlebar-window: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5.08496 4C5.29088 3.4174 5.8465 3 6.49961 3H9.99961C11.6565 3 12.9996 4.34315 12.9996 6V9.5C12.9996 10.1531 12.5822 10.7087 11.9996 10.9146V6C11.9996 4.89543 11.1042 4 9.99961 4H5.08496ZM4.5 5H9.5C10.3284 5 11 5.67157 11 6.5V11.5C11 12.3284 10.3284 13 9.5 13H4.5C3.67157 13 3 12.3284 3 11.5V6.5C3 5.67157 3.67157 5 4.5 5ZM4.5 6C4.22386 6 4 6.22386 4 6.5V11.5C4 11.7761 4.22386 12 4.5 12H9.5C9.77614 12 10 11.7761 10 11.5V6.5C10 6.22386 9.77614 6 9.5 6H4.5Z' fill='%23212121'/%3E%3C/svg%3E");
  --titlebar-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.58859 2.71569L2.64645 2.64645C2.82001 2.47288 3.08944 2.4536 3.28431 2.58859L3.35355 2.64645L8 7.293L12.6464 2.64645C12.8417 2.45118 13.1583 2.45118 13.3536 2.64645C13.5488 2.84171 13.5488 3.15829 13.3536 3.35355L8.707 8L13.3536 12.6464C13.5271 12.82 13.5464 13.0894 13.4114 13.2843L13.3536 13.3536C13.18 13.5271 12.9106 13.5464 12.7157 13.4114L12.6464 13.3536L8 8.707L3.35355 13.3536C3.15829 13.5488 2.84171 13.5488 2.64645 13.3536C2.45118 13.1583 2.45118 12.8417 2.64645 12.6464L7.293 8L2.64645 3.35355C2.47288 3.17999 2.4536 2.91056 2.58859 2.71569L2.64645 2.64645L2.58859 2.71569Z' fill='%23212121'/%3E%3C/svg%3E");
  --titlebar-wordmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:serif='http://www.serif.com/' width='100%25' height='100%25' viewBox='0 0 74 24' version='1.1' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg id='ArtBoard1' transform='matrix(0.616667,0,0,0.2,0,0)'%3E%3Crect x='0' y='0' width='120' height='120' style='fill:none;'/%3E%3Cg transform='matrix(0.0358629,0,0,0.110577,-4.66262,-16.9717)'%3E%3Cpath d='M1364.01,716.563C1344.7,765.057 1265.53,753.189 1265.53,711.118L1265.53,590.335C1265.53,546.78 1343.72,536.891 1367.47,580.434L1439.72,551.231C1411.51,488.926 1359.55,470.63 1316.5,470.63C1246.24,470.63 1177.01,511.178 1177.01,590.335L1177.01,711.118C1177.01,790.77 1246.24,830.824 1315.01,830.824C1359.06,830.824 1412.01,809.066 1441.2,752.2L1364.01,716.563ZM3082.5,767.529C3115.14,809.561 3159.64,830.824 3201.72,830.824C3266.08,830.824 3337.29,793.737 3340.25,725.969C3344.21,639.838 3281.9,618.057 3219.55,606.672C3192.31,600.732 3173.98,590.832 3172.99,574.002C3174.48,533.423 3237.37,531.939 3273.99,571.031L3331.85,526.501C3295.75,482.496 3254.7,470.63 3212.12,470.63C3147.77,470.63 3085.47,506.723 3085.47,575.487C3085.47,642.313 3136.89,677.953 3193.3,686.863C3222.02,690.823 3254.21,702.209 3253.22,722.009C3250.75,759.617 3173.49,757.64 3138.38,715.079L3082.5,767.529ZM3049.31,559.147L3049.31,475.084L2773.74,475.084L2773.74,559.147L2866.77,559.147L2866.77,825.875L2956.28,825.875L2956.28,559.147L3049.31,559.147ZM1675.3,825.875L1785.59,825.875L1690.13,705.632C1732.66,692.282 1758.87,655.692 1758.87,590.843C1756.89,508.709 1701.01,475.578 1628.75,475.578L1488.74,475.578L1488.74,825.875L1578.24,825.875L1578.24,714.532L1594.09,714.532L1675.3,825.875ZM2652.53,825.875L2762.83,825.875L2667.37,705.632C2709.89,692.282 2736.1,655.692 2736.1,590.843C2734.12,508.709 2678.25,475.578 2605.99,475.578L2465.97,475.578L2465.97,825.875L2555.48,825.875L2555.48,714.532L2571.33,714.532L2652.53,825.875ZM2302.17,475.578L2221.53,475.578L2099.32,825.875L2194.32,825.875L2216.08,755.605L2309.6,755.605L2332.35,825.875L2427.35,825.875L2302.17,475.578ZM1913.23,558.652L2067.62,558.652L2067.62,475.578L1823.72,475.578L1823.72,825.875L2067.62,825.875L2067.62,742.306L1913.23,742.306L1913.23,689.789L2055.25,689.789L2055.25,613.149L1913.23,613.149L1913.23,558.652ZM2235.88,676.985L2261.6,574.55L2264.08,574.55L2288.32,676.985L2235.88,676.985ZM1578.24,638.386L1578.24,558.158L1630.24,558.158C1686.17,558.158 1686.17,638.386 1630.24,638.386L1578.24,638.386ZM2555.48,638.386L2555.48,558.158L2607.47,558.158C2663.41,558.158 2663.41,638.386 2607.47,638.386L2555.48,638.386Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(0.810811,0,0,2.5,1.62162,6.4011e-11)'%3E%3Cpath d='M34.209,10.49C34.209,9.536 33.83,8.622 33.156,7.947C32.482,7.273 31.567,6.894 30.613,6.894C24.801,6.894 13.408,6.894 7.596,6.894C6.642,6.894 5.727,7.273 5.053,7.947C4.379,8.622 4,9.536 4,10.49L4,33.505C4,34.459 4.379,35.374 5.054,36.048C5.729,36.723 6.644,37.101 7.598,37.101C14.092,37.096 27.101,37.086 27.101,37.086L26.187,33.929L34.209,41.106L34.209,10.49ZM26.217,15.436C24.922,14.842 23.534,14.405 22.082,14.154C22.055,14.149 22.029,14.161 22.015,14.185C21.837,14.503 21.639,14.917 21.501,15.243C19.939,15.009 18.386,15.009 16.857,15.243C16.718,14.91 16.513,14.503 16.334,14.185C16.32,14.162 16.294,14.15 16.267,14.154C14.816,14.404 13.428,14.841 12.132,15.436C12.121,15.441 12.112,15.449 12.105,15.46C9.472,19.394 8.75,23.232 9.104,27.022C9.106,27.04 9.116,27.058 9.131,27.069C10.868,28.345 12.551,29.12 14.203,29.633C14.229,29.642 14.257,29.632 14.274,29.61C14.665,29.076 15.013,28.514 15.312,27.922C15.33,27.888 15.313,27.846 15.277,27.833C14.724,27.623 14.198,27.368 13.692,27.077C13.652,27.054 13.649,26.997 13.686,26.969C13.792,26.89 13.899,26.807 14,26.723C14.019,26.707 14.044,26.704 14.066,26.714C17.391,28.232 20.99,28.232 24.275,26.714C24.297,26.703 24.322,26.707 24.341,26.722C24.443,26.806 24.55,26.89 24.657,26.969C24.694,26.997 24.691,27.054 24.651,27.077C24.145,27.373 23.619,27.623 23.066,27.832C23.03,27.846 23.014,27.888 23.031,27.922C23.337,28.513 23.685,29.076 24.068,29.609C24.084,29.632 24.113,29.642 24.14,29.633C25.799,29.12 27.482,28.345 29.22,27.069C29.235,27.058 29.245,27.041 29.246,27.023C29.67,22.641 28.537,18.835 26.243,15.46C26.237,15.449 26.228,15.441 26.217,15.436ZM15.808,24.714C14.808,24.714 13.983,23.795 13.983,22.667C13.983,21.538 14.792,20.619 15.808,20.619C16.833,20.619 17.65,21.546 17.634,22.667C17.634,23.795 16.825,24.714 15.808,24.714ZM22.558,24.714C21.557,24.714 20.733,23.795 20.733,22.667C20.733,21.538 21.541,20.619 22.558,20.619C23.583,20.619 24.4,21.546 24.384,22.667C24.384,23.795 23.583,24.714 22.558,24.714Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")center no-repeat;
}

// ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ Titlebar                 ║ Base                                                                                    ║
// ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝

// Spacing
.platform-win .layer-86YKbF {
  top: -22px;
  padding-top: calc(var(--height-titlebar) - 2px);
}

// Background
.titleBar-1it3bQ::before {
  content: "";
  position: absolute;
  background: var(--background-secondary-alt);
  -webkit-app-region: drag;
  height: var(--height-titlebar);
  width: 100%;
  top: -2px;
}

// ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ Titlebar                 ║ Wordmark                                                                                ║
// ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝

// Remove Wordmark
.platform-win .wordmark-2u86JB svg {
  display: none;
}

// Wordmark
.platform-win .wordmarkWindows-2dq6rw::before {
  -webkit-mask: var(--titlebar-wordmark);
  mask: var(--titlebar-wordmark);
  background: var(--header-secondary);
  height: calc(var(--height-titlebar) - 2px);
  position: absolute;
  content: "";
  font-size: 12px;
  font-weight: 600;
  width: calc(70px);
  top: 0;
  opacity: var(--opacity-titlebar-wordmark);
}

// ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ Titlebar                 ║ Title                                                                                   ║
// ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝

.wordmarkWindows-2dq6rw::after {
  position: fixed;
  font-size: 12px;
  font-weight: 400;
  font-family: var(--font-titlebar);
  width: 100%;
  text-align: center;
  line-height: 20px;
  top: 0px;

  height: calc(var(--height-titlebar) - 2px);
  left: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  opacity: var(--opacity-titlebar-title);
  color: var(--header-secondary);
}

// Title (Windows)
.wordmarkWindows-2dq6rw::after {
  content: "CreArts " var(--info-version) " - " var(--info-skin) " " var(--info-shape, " ") " - by " var(--info-author);
}

.wordmarkWindows-2dq6rw::after {
  content: "CreArts " var(--info-version) " - " var(--info-skin) " " var(--info-shape, " ") " - by " var(--info-author);
}

// ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ Titlebar                 ║ Buttons                                                                                 ║
// ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝

// Buttons
.winButton-3UMjdg,
.winButton-3UMjdg:hover,
.winButton-3UMjdg:active {
  height: calc(var(--height-titlebar) - 2px);
  width: 42px;
  opacity: var(--opacity-titlebar-buttons);
}

// Focused
.app-focused .winButton-3UMjdg,
.app-focused .winButton-3UMjdg:hover,
.app-focused .winButton-3UMjdg:active {
  color: white;
  opacity: 1;
}

// No Icons
.winButtonMinMax-3RsPUg:nth-child(3) svg {
  display: none;
}
.winButtonClose-3Q8ZH5 svg {
  display: none;
}

// Minimize (Windows)
.winButtonMinMax-3RsPUg:nth-child(4):after {
  content: "";
  background: var(--header-secondary);
  width: 16px;
  height: 16px;
  mask: var(--icon);
  -webkit-mask: var(--icon);
  --icon: var(--titlebar-minimize);
}

// Maximize (Windows)
.winButtonMinMax-3RsPUg:nth-child(3):after {
  content: "";
  background: var(--header-secondary);
  width: 16px;
  height: 16px;
  mask: var(--icon);
  -webkit-mask: var(--icon);
  --icon: var(--titlebar-maximize);
}

// Window (Windows)
.maximized .winButtonMinMax-3RsPUg:nth-child(3):after {
  content: "";
  background: var(--header-secondary);
  width: 16px;
  height: 16px;
  mask: var(--icon);
  -webkit-mask: var(--icon);
  --icon: var(--titlebar-window);
}

// Close (Windows)
.winButtonClose-3Q8ZH5:after {
  content: "";
  background: var(--header-secondary);
  width: 16px;
  height: 16px;
  mask: var(--icon);
  -webkit-mask: var(--icon);
  --icon: var(--titlebar-close);
}

// Background
.winButtonMinMax-3RsPUg:hover,
.winButtonMinMax-3RsPUg:active {
  background: var(--background-secondary);
}

// Background
.winButtonClose-3Q8ZH5:hover,
.winButtonClose-3Q8ZH5:active {
  background: #c42b1c;
}

// No Icon

// Hover
.winButtonClose-3Q8ZH5:hover:after,
.winButtonClose-3Q8ZH5:active:after {
  color: white;
}

// Butons
.platform-osx .macButtons-eIdy0e {
  z-index: 200;
  position: fixed;
  top: -2px;
  left: 0px;
}

// No Icon
.winButtonMinMax-3RsPUg:nth-child(4) svg {
  display: none;
}

// ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ Titlebar (OSX)           ║ Wordmark                                                                                ║
// ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝

// Version (OSX)
.platform-osx .macButtons-eIdy0e::after {
  position: fixed;
  font-size: 12px;
  font-weight: 400;
  font-family: var(--font-titlebar);
  padding-left: 80px;
  width: 100%;
  top: 5px;
  color: var(--header-secondary);
  left: -5vw;
  text-align: center;
}

// Wordmark (OSX)
.platform-osx .macButtons-eIdy0e::after {
  content: "CreArts " var(--info-version) " - " var(--info-skin) " - by " var(--info-author);
}
