/* Complementary Theme (Mark-I) */

/* Based on ElementaryOS design principles */

/* Look into incorporating some "Glass Morphism", perhaps in tandem with Accent Colors */

/* https://dev.to/crayoncode/shiny-glass-hover-effect-glassmorphism-17n7 */

/* https://superdevresources.com/glassmorphism-ui-css/ */

/* Import the various sub-components of Complementary */

@import url("palette.css");
@import url("toggle-switch.css");
@import url("button.css");
@import url("checkbox.css");
@import url("select-dropdown.css");
@import url("search.css");
@import url("navigation.css");
@import url("sidebar.css");
@import url("login.css");
@import url("text-input.css");
@import url("vertical-row.css");
@import url("links.css");
@import url("scrollbar.css");
@import url("textbox.css");
@import url("selection-slider.css");
@import url("selection-tab.css");
@import url("input-invisible.css");
@import url("pagination.css");
/* Setting the default margins and paddings for every element */

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

/* Setting the base variables for the style */

:root {
  --window-background: var(--background-darkest);

  --backdrop-color: #686868;
  --gradient-top: var(--gradient-top-dark);
  --gradient-bottom: var(--gradient-bottom-dark);
  --content-background: var(--background-dark);
  --text-title: var(--text-color-1-dark);
  --text-content: var(--text-color-1-dark);
  --accent-primary: var(--blueberry-400);
  --accent-secondary: var(--blueberry-300);
  --accent-text: var(--text-color-1-dark);

  --text-disabled: var(--text-color-3-dark);

  --border-color: var(--border-dark);

  --header-height: 60px;
  --corner-radius: 15px;
  --padding-amount: 20px;
}

/* This sets text and object selection color to the current accent */

::selection {
  background-color: #a1a1a15c;
}

/* This is for placeholder text (such as the search bar), which uses the text color of the div, and sets an opacity to lower the contrast */

::placeholder,
.placeholder {
  opacity: 0.45;
  color: white;
  mix-blend-mode: difference;
  font-style: italic;
  font-family: Inter;
}

/* Setting the HTML Body default settings */

html,
body {
  background-color: var(--window-background);
}

html {
  height: -webkit-fill-available;
}

body {
  font-family: Inter;
  font-size: 16px;
  color: var(--text-content);
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  margin: 0;
  width: 100%;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  padding-left: env(safe-area-inset-left);
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

/* COMPLEMENTARY LAYOUT AND STYLE */

/* This is the generic "div" without any special changes */

div {
  margin: auto;
  margin-top: 0px;
}

pre {
  font-size: 16px;
}

input:focus,
button:focus {
  outline: 0;
}

/* This is the base content layout for  the sidebar */

.sidebar-content {
  padding: calc(var(--header-height) + 10px) 10px 0px 10px;
  /* padding: 10px 10px 0px 10px; */
}

/* This is the main content window to the right of the sidebar */

.main {
  float: initial;
  margin-left: 50px;
  height: inherit;
  border-radius: calc(var(--corner-radius) + 1px) 0px 0px calc(var(--corner-radius) + 1px);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
  /* This adds the smooth animation on SideBar expansion/collapse */
  transition: 0.5s;
  /* This is the new shifting gradient background to replace the login image */
  /* background: linear-gradient(-45deg, var(--strawberry-200), var(--bubblegum-300), var(--blueberry-200), var(--mint-300));
  background-size: 400% 400%;
  animation: gradient 60s ease infinite; */
  background-color: var(--accent-primary);
}

/* This is the animation for the gradient background */

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* This adds a border to the outside of an "app" window */

.bordered {
  border-radius: 0px 0px 10px 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/* This is the entire app window, including title bar and content */

/* .window { */
/* width: 95%; */
/* height: 94%; */
/* box-shadow: rgba(0, 0, 0, 0.35) 0px 15px 25px; */
/* } */

/* This is the app's title bar, which has the title text and search bar */

.titlebar {
  position: sticky;
  border-radius: var(--corner-radius) 0px 0px 0px;
  height: var(--header-height);
  line-height: 50px;
  vertical-align: middle;
  box-shadow: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  color: var(--text-title);
  overflow: hidden;
  display: flex;
}

/* This is the contents of the app window */

.content {
  margin: auto;
  margin-top: 0px;
  border-radius: 0px 0px 0px var(--corner-radius);
  /* text-align: center; */
  vertical-align: middle;
  box-shadow: none;
  height: calc(100vh - var(--header-height));
  overflow-y: auto;
}

/* This is the text part of the app titlebar */

.window-title {
  width: 50%;
  /* margin-left: 16%; */
}

/* This is the search bar at the end of the app titlebar */

.window-search {
  margin-right: 7px;
  float: right;
  padding-top: 2px;
}

/* LIGHT AND DARK MODE CLASSES */

/* This is the titlebar's gradient in dark, light, and accent modes */

.dark-gradient {
  background-image: -webkit-gradient(linear,
      left top,
      left bottom,
      from(var(--gradient-top-dark)),
      to(var(--gradient-bottom-dark)));
}

.light-gradient {
  background-image: -webkit-gradient(linear,
      left top,
      left bottom,
      from(var(--gradient-top-light)),
      to(var(--gradient-bottom-light)));
}

.accent-gradient {
  background-image: -webkit-gradient(linear,
      left top,
      left bottom,
      from(var(--blueberry-300)),
      to(var(--blueberry-400)));
}

/* This is the app window's color scheme in dark and light modes */

.dark {
  background-color: var(--background-darker);
  border-color: var(--border-dark);
}

.light {
  background-color: var(--background-light);
  border-color: var(--border-light);
}

/* This is the text colors for dark and light mode (typically opposite color of the background) */

.dark-mode-text {
  color: var(--text-color-1-dark);
}

.light-mode-text {
  color: var(--text-color-1-light);
}