//
//// Custom Theming for Angular Material
//// For more information: https://material.angular.io/guide/theming
//@use '@angular/material' as mat;
//// Plus imports for other components in your app.
//
//// Include the common styles for Angular Material. We include this here so that you only
//// have to load a single css file for Angular Material in your app.
//// Be sure that you only ever include this mixin once!
//@include mat.core();
//
//// Define the palettes for your theme using the Material Design palettes available in palette.scss
//// (imported above). For each palette, you can optionally specify a default, lighter, and darker
//// hue. Available color palettes: https://material.io/design/color/
//$NapicuBios-primary: mat.define-palette(mat.$indigo-palette);
//$NapicuBios-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
//
//// The warn palette is optional (defaults to red).
//$NapicuBios-warn: mat.define-palette(mat.$red-palette);
//
//// Create the theme object. A theme consists of configurations for individual
//// theming systems such as "color" or "typography".
//$NapicuBios-theme: mat.define-light-theme((
//  color: (
//    primary: $NapicuBios-primary,
//    accent: $NapicuBios-accent,
//    warn: $NapicuBios-warn,
//  )
//));
//
//// Include theme styles for core and each component used in your app.
//// Alternatively, you can import and @include the theme mixins for each component
//// that you are using.
//@include mat.all-component-themes($NapicuBios-theme);

@import 'src/app/system/Systems/NapicuOS/styles/variables.scss';
@import 'src/app/system/Systems/NapicuOS/styles/buttons.scss';
@import 'src/app/system/Systems/NapicuOS/styles/window.scss';
@import 'src/app/system/Systems/NapicuOS/styles/img.scss';
@import 'src/app/system/Systems/NapicuOS/styles/font.scss';
@import 'src/app/system/Systems/NapicuOS/styles/App.scss';
@import 'src/app/system/Systems/NapicuOS/styles/resizer.scss';
@import 'src/app/system/Systems/NapicuOS/styles/ToolMenu.scss';
@import 'src/app/system/Systems/NapicuOS/styles/Input.scss';
@import 'src/app/system/Systems/NapicuOS/styles/Box.scss';
@import 'src/app/system/Systems/NapicuOS/styles/BoxMenu.scss';
@import 'src/app/system/Systems/NapicuOS/styles/Table.scss';
@import 'src/app/system/Systems/NapicuOS/styles/Slider.scss';
@import 'src/app/system/Systems/NapicuOS/styles/ArrowSetting.scss';
@import 'src/app/system/Systems/NapicuOS/styles/Icon.scss';
@import 'src/app/system/Systems/NapicuOS/styles/Loader.scss';
@import url('https://fonts.googleapis.com/css2?family=Cantarell:ital,wght@0,400;0,700;1,400;1,700&family=Source+Code+Pro:wght@500&display=swap');
/* You can add global styles to this file, and also import other style files */
@font-face {
  font-family: 'DosVGA';
  //overflow-y: hidden;
  src: url('assets/font/Perfect DOS VGA 437.ttf') format('truetype');
}


$BorderTopABottom: 2px solid blue;
$BorderLeftARight: 4px solid blue;
$FrameSizeHeight: 100%;
* {
  padding: 0;
  font-family: 'DosVGA';
  margin: 0;
  box-sizing: border-box;
  user-select: none;
}

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-y: hidden;
  overflow-x: hidden;
}

#black {
  background-color: black;
  width: 100%;
  height: 100vh;
  user-select: none;
  color: white;
}

#BiosContainer {
  background-color: lightgray;
  width: 100%;
  height: 85vh;
  padding: 20px 10px;
}

#Frame {
  border-left: $BorderLeftARight;
  border-right: $BorderLeftARight;
  border-top: $BorderTopABottom;
  border-bottom: $BorderTopABottom;
  height: $FrameSizeHeight;
}

.Grid {
  display: grid;
  grid-template-columns: 60% 40%;
  height: 100%;
}

.Grid-ItemHoz {
  display: grid;
  grid-template-rows: 50% 50%;
}

#Grid-BiosItems {
  display: grid;
  grid-template-columns: 60% 40%;
  padding: 3px 0px;
}

.colon {
  float: right;
  margin-right: 10%;
}

#Title {
  font-size: 1.8rem;
  padding: 20px;
  color: black;

  font-weight: bold;
}

.Information {
  font-size: 1.7rem;

  color: gray;
}

.blue {
  color: blue;
}

.Hin {
  border-top: $BorderTopABottom;
}

//Items

.Option {
  color: blue;
}

.BIOSSelectedOption {
  color: white;
}

.Right {
  border-left: $BorderLeftARight;
}

.Right > div {
  padding: 10px;
}

.Options-Arrow {
  font-size: 20px;
}

//Author: https://stackoverflow.com/questions/6831482/contenteditable-single-line-input
[contenteditable='true'].single-line {
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
}

[contenteditable='true'].single-line br {
  display: none;
}

[contenteditable='true'].single-line * {
  display: inline;
  white-space: nowrap;
}

[contenteditable='true'].single-line img {
  display: none;
}

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
