.os-window {
  //
  //Variables
  //

  //Hides & shows controls buttons
  --minimizeButton: block;
  --maximizeButton: block;
  --closeButton: block;

  //Hides & shows resizable cursor
  --cursorN: n-resize;
  --cursorNE: ne-resize;
  --cursorE: e-resize;
  --cursorSE: se-resize;
  --cursorS: s-resize;
  --cursorSW: sw-resize;
  --cursorW: w-resize;
  --cursorNW: nw-resize;

  //Why is this fixed 'instead' of 'absolute'?
  position: fixed;
  top: -100%;
  left: 0;
}

//Universal theming
.window-child {
  display: flex;
  flex-direction: column;

  .window-resize {
    position: absolute;
  }

  //heads up, --winBorder is located in the theme file
  .n {
    top: calc(-4px - var(--winBorder));
    left: calc(4px - var(--winBorder));

    height: 8px;
    width: calc(100% - (8px - 2 * var(--winBorder)));

    cursor: var(--cursorN);
  }

  .ne {
    top: calc(-4px - var(--winBorder));
    right: calc(-4px - var(--winBorder));

    height: 8px;
    width: 8px;

    cursor: var(--cursorNE);
  }

  .e {
    top: calc(4px - var(--winBorder));
    right: calc(-4px - var(--winBorder));

    height: calc(100% - (8px - 2 * var(--winBorder)));
    width: 8px;

    cursor: var(--cursorE);
  }

  .se {
    bottom: calc(-4px - var(--winBorder));
    right: calc(-4px - var(--winBorder));

    height: 8px;
    width: 8px;

    cursor: var(--cursorSE);
  }

  .s {
    bottom: calc(-4px - var(--winBorder));
    left: calc(4px - var(--winBorder));

    height: 8px;
    width: calc(100% - (8px - 2 * var(--winBorder)));

    cursor: var(--cursorS);
  }

  .sw {
    bottom: calc(-4px - var(--winBorder));
    left: calc(-4px - var(--winBorder));

    height: 8px;
    width: 8px;

    cursor: var(--cursorSW);
  }

  .w {
    top: calc(4px - var(--winBorder));
    left: calc(-4px - var(--winBorder));

    height: calc(100% - (8px - 2 * var(--winBorder)));
    width: 8px;

    cursor: var(--cursorW);
  }

  .nw {
    top: calc(-4px - var(--winBorder));
    left: calc(-4px - var(--winBorder));

    height: 8px;
    width: 8px;

    cursor: var(--cursorNW);
  }

  .window-bar {
    padding-top: 4px;
    padding-right: 4px;
    padding-left: 4px;

    .window-bar-anchor {
      display: flex;
      flex-direction: row;
      align-items: center;

      .window-title {
        flex: 1 1 0%;
      }

      .controls-container {
        display: flex;
        align-items: center;

        .minimize {
          display: var(--minimizeButton);
        }

        .maximize {
          display: var(--maximizeButton);
        }

        .close {
          display: var(--closeButton);
        }
      }
    }
  }

  .window-content {
    height: 100%;
    width: 100%;
    overflow: auto;

    ng-scrollbar {
      ng-content {
        flex: 1 1 0%;
      }
    }
  }
}

.maximized {
  width: 100vw;
  height: 100vh;
}
