/*
 * App
 *
 */
.app-cnt {
  display: grid;
  grid-template-rows: 60px auto 100px;
  grid-template-columns: 0 1fr 0;
  transition: all 0.2s;
  min-height: 100vh;
}

.app-cnt > borg-notifications {
  display: none;
}

.app-cnt.show-notifications > borg-notifications {
  display: block;
}

/*
  +++ Media Queries for handling Sidebar & Notification Layout +++
*/
@media (max-width: 600px) {
  /*
    on mobile, if the sidebar is selected, only show the sidebar
  */

  .app-cnt.show-sidebar {
    grid-template-columns: 1fr 0 0;
    transition: all 0.2s;
  }

  /*
    disable all children of the app-cnt, then enable the sidebar and navbar
  */
  .app-cnt.show-sidebar > * {
    display: none;
  }

  .app-cnt.show-sidebar > borg-sidebar,
  .app-cnt.show-sidebar > borg-navbar {
    display: block;
  }
}

@media (min-width: 601px) {
  /*
    on desktop, if the sidebar is selected, show the sidebar at the side
  */
  .app-cnt.show-sidebar {
    grid-template-columns: 180px 1fr 0;
    transition: all 0.2s;
  }
}

/*
  +++
*/
@media (max-width: 600px) {
  /*
    on mobile, if the sidebar is selected, only show the sidebar
  */

  .app-cnt.show-notifications {
    grid-template-columns: 0 0 1fr;
    transition: all 0.2s;
  }

  /*
    disable all children of the app-cnt, then enable the notifications and navbar
  */
  .app-cnt.show-notifications > * {
    display: none;
  }

  .app-cnt.show-notifications > borg-notifications,
  .app-cnt.show-notifications > borg-navbar {
    display: block;
  }
}

@media (min-width: 601px) {
  /*
    on desktop, if the sidebar is selected, show the sidebar at the side
  */
  .app-cnt.show-notifications {
    grid-template-columns: 0 1fr 300px;
    transition: all 0.2s;
  }
}

@media (min-width: 601px) {
  /*
    on desktop, if both the sidebar and navbar are selected, show them!
  */
  .app-cnt.show-sidebar.show-notifications {
    grid-template-columns: 180px 1fr 300px;
    transition: all 0.2s;
  }
}




/*
 * Navbar
 *
 */
borg-navbar {
  background-color: var(--navbar-color);
  color: white;
  grid-row: 1;
  padding: 20px;
  border-bottom: 4px solid var(--navbar-border-color);
  grid-column: 1 / 4;
}

.borg-navbar ul {
  list-style-type: none;
}

.borg-navbar li {
  display: inline;
}

.navbar-button {
  padding: 9px;
  margin: 7px;
  user-select: none;
}

.navbar-button:hover {
  background-color: var(--navbar-hover-color);
  border-radius: 7px;
}

.navbar-button a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}

.navbar-button.active {
  border-bottom: 6px solid white;
}

/* yes, I know this is bad, but I don't want to refactor the navbar yet */
.navbar-divider {
  margin-left: calc(100cqw - 260px);
}

/*
 * Sidebar
 *
 */
borg-sidebar {
  overflow: auto;
  resize: horizontal;
  font-size: 14px;
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 1;
  overflow-y: scroll;
  height: 100%;
  background-color: var(--sidebar-background-color);
}

borg-sidebar::-webkit-scrollbar {
  display: none;
}

borg-sidebar ul {
  list-style-type: none;
}

borg-database-add h2 {
  display: inline;
}

.borg-database {
  display: grid;
  grid-template-columns: 4fr 1fr;
  cursor: pointer;
}

.borg-database.active {
  background-color: var(--sidebar-button-hover-color);
}

.database-name {
  grid-column-start: 1;
  padding: 12px;
  margin: 8px;
  border-radius: 7px;
}

.database-settings {
  grid-column-start: 2;
  padding: 12px;
  margin: 8px;
  border-radius: 7px;
}

.database-settings:hover {
  background-color: var(--sidebar-button-hover-color);
}

.borg-database:hover {
  background-color: var(--sidebar-hover-color);
}

.borg-sidebar-heading {
  font-weight: bold;
  border-bottom: 1px solid var(--sidebar-border-color);
}

.borg-add-card-section {
  background-color: white;
}

.borg-show-card-section {
  grid-row-start: 3;
  background-color: green;
}

.machine-settings {
  font-size: 1.75em;
}

.borg-sidebar-heading {
  display: grid;
  grid-template-columns: 4fr 1fr;
}

.sidebar-heading-button:hover {
  background-color: var(--sidebar-button-hover-color);
}

.sidebar-heading-button.active {
  background-color: var(--sidebar-button-hover-color);
}

.sidebar-heading {
  grid-column: 1 / 1;
  padding: 10px;
  margin: 10px;
  font-size: 14px;
  font-weight: bold;
}

.sidebar-heading-button {
  cursor: pointer;
  border-radius: 5px;
  grid-column-start: 2;
  padding: 10px;
  margin: 10px;
}

.borg-database.syncing {
	background: linear-gradient(-45deg, var(--sidebar-sync-colour-from), var(--sidebar-sync-colour-to) );
	background-size: 400% 400%;
	animation: sync-gradient 5s ease infinite;
}

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

/*
  todo: refactor this to a column
*/
borg-notifications {
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column-start: 3;
  grid-column-end: 3;
  height: 100%;
  padding: 10px;
  margin: 0;
  box-sizing: border-box;
  background-color: var(--sidebar-background-color);
}

borg-notifications ul {
  list-style-type: none;
}

.notification {
  background-color: white;
  padding: 10px;
  margin-bottom: 10px;
}

.notification-status {
  margin-bottom: 10px;
  font-weight: bold;
}

.empty {
  text-align: center;
}