@keyframes not-responding {
  0% {
    background-color: #ffffff00;
  }
  100% {
    background-color: #ffffffaa;
  }
}

/* font */
@font-face {
  font-family: "segoe-ui";
  src: url("../fonts//segoe-ui.woff2") format("woff2");
  /* ,url("https://use.typekit.net/af/936003/0000000000000000775ab3ff/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff")
  ,url("https://use.typekit.net/af/936003/0000000000000000775ab3ff/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); */
}

.not-a-big-red-button {
  background-color: var(--color-red-00);
  border-radius: var(--border-radius-m);
  padding: var(--space-m);

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  cursor: default;
}
.not-responding-overlay {
  /* --not-responding-transparency: 90%; */
  /* background-color: color-mix(in oklab, white, transparent var(--not-responding-transparency)); */
  /* background-color: #ffffff00; */

  display: none;

  position: fixed;
  width: 100vw;
  height: 100vh;

  cursor: wait;
}
.window-not-responding {
  .not-responding-overlay {
    display: initial;
    /* --not-responding-transparency: 40%; */
    animation-name: not-responding;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-delay: 1s;

    .title-bar {
      position: absolute;
      width: 100%;

      background-color: white;
      color: black;
      font-family: segoe-ui, sans-serif;
      font-size: 9pt;
      height: 28px;

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

      user-select: none;

      .title-bar-title-group {
        display: flex;
        align-items: center;

        padding-inline-start: 2px;
        gap: 6px;

        .title-bar-icon {
          height: 16px;
        }
      }

      .title-bar-buttons {
        display: flex;

        .title-bar-button {
          border: initial;
          background-color: initial;
          padding: initial;

          cursor: wait;

          .fill {
            width: 45px;
            height: 28px;
          }
          &.minimize {
            padding-inline-end: 1px;
            .fill {
              background-image: url(../png/minimize.png);
            }
          }
          &.restore {
            padding-inline-end: 1px;
            .fill {
              background-image: url(../png/restore.png);
            }
          }
          &.close {
            padding-inline-end: 2px;
            .fill {
              background-image: url(../png/close.png);
            }
          }
        }
      }
    }
  }
}