/* Default styling for the sidebar active button */
#sidebar .nav-button {
  background-color: var(--secondary-color);
  color: var(--tertiary-color);

  border: none;
  padding: 10px;
  border-radius: 5px;

  cursor: pointer;

  transition: all 0.2s;
}

#sidebar .nav-button .fa {
  margin-right: 10px;
}

#sidebar .nav-button .fa-bars,
#sidebar .nav-button .fa-times {
  margin-right: 0;
  transition: all 0.2s;
}

#sidebar .nav-button:hover,
#sidebar .nav-button:active {
  background-color: var(--primary-color);
}

#sidebar .nav-button:focus,
#sidebar .nav-button .fa:focus,
#sidebar .nav-button .fa-bars:focus,
#sidebar .nav-button .fa-times:focus {
  outline: none;
}

#sidebar .nav-button .fa:hover,
#sidebar .nav-button .fa:active,
#sidebar .nav-button .fa-bars:hover,
#sidebar .nav-button .fa-times:hover,
#sidebar .nav-button .fa-bars:active,
#sidebar .nav-button .fa-times:active {
  color: var(--primary-color);
}

#sidebar .nav-button:hover .fa-bars,
#sidebar .nav-button:hover .fa-times,
#sidebar .nav-button:active .fa-bars,
#sidebar .nav-button:active .fa-times {
  color: var(--primary-color);
}

/* Specific styling for the sidebar active button */
#sidebar #sidebar-toggle-button {
  position: fixed;
  top: 50%;
  left: 20px;
  z-index: 2;

  background-color: var(--secondary-color);
  color: var(--tertiary-color);

  border: none;
  padding: 10px;
  border-radius: 5px;

  cursor: pointer;

  transition: all 0.2s;
  transition: left 0.4s ease-in-out; /* Slide in with same speed as sidebar */
}

/* Styling for the sidebar overlay */
#sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 2;

  width: 100%;
  height: 100%;

  transition: transform 0.4s ease-in-out;
  transform: translateX(-100%); /* Slide out */
}

/* Activation of the sidebar overlay */
#sidebar.show-sidebar #sidebar-overlay {
  /* Change the opacity of rest of the page content as needed */
  background: rgba(0, 0, 0, 0.5);
  transform: translateX(0px); /* Slide in */
}

#sidebar.show-sidebar #sidebar-toggle-button {
  z-index: 3;
  left: calc(14% + 20px); /* Adjust the width of the sidebar as needed */
}

/* Styling for the sidebar content inside the overlay */
#sidebar-content {
  background-color: var(--tertiary-color);
  color: var(--secondary-color);

  border: 3px solid var(--quaternary-color);
  border-left: none;
  padding: 20px;
  box-sizing: border-box;

  max-width: 14%; /* Adjust the width of the sidebar as needed */
  height: 100%; /* Make the sidebar overlay 100% of the page */

  overflow: hidden;
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#sidebar-content #sidebar-header {
  /* TODO: Not needed for now, as the beta tag creates the same effect */
  /* margin-bottom: 20px; */
}

#sidebar-content #sidebar-header .logo img {
  width: 100%;
  border-radius: 50%;
}

#sidebar-content #sidebar-header .name h1 {
  color: var(--primary-color);
  margin-bottom: 0;
}

#sidebar-content #sidebar-header .name #beta {
  color: var(--quaternary-color);
  font-size: 9px;
  margin: 0;
  padding: 2px;

  /* TODO: Test the position of the beta tag on different screen sizes */
  /* Especially above 1000px as the h1 sometimes wraps to two lines */

  position: relative;
  top: -81.5px;
  left: 9px; /* Align the beta tag with the logo */

  border: 1px solid var(--warning-color);
  border-radius: 5px;
  background-color: var(--warning-color);
}

#sidebar-content #sidebar-body nav {
  background-color: var(--secondary-color);
  color: var(--tertiary-color);
  padding: 10px;
  border-radius: 5px;
}

#sidebar-content #sidebar-body nav .nav-button {
  transition: all 0.2s;
}

#sidebar-content #sidebar-body nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#sidebar-content #sidebar-body nav ul li {
  display: inline-block;
  width: 100%;
}

#sidebar-content #sidebar-body nav ul li a {
  color: var(--tertiary-color);
  display: block;
  padding: 10px;
  text-decoration: none;
  border-radius: 5px;
}

#sidebar-content #sidebar-body nav ul li a:hover {
  background-color: var(--primary-color);
}

@media only screen and (max-width: 1400px) {
  #sidebar.show-sidebar #sidebar-toggle-button {
    left: calc(17% + 20px); /* Adjust the width of the sidebar as needed */
  }

  #sidebar-content {
    max-width: 17%;
  }
}

@media only screen and (max-width: 1200px) {
  #sidebar.show-sidebar #sidebar-toggle-button {
    left: calc(20% + 20px); /* Adjust the width of the sidebar as needed */
  }

  #sidebar-content {
    max-width: 20%;
  }
}

@media only screen and (max-width: 1000px) {
  #sidebar.show-sidebar #sidebar-toggle-button {
    left: calc(25% + 20px); /* Adjust the width of the sidebar as needed */
  }

  #sidebar-content {
    max-width: 25%;
  }
}

@media only screen and (max-width: 800px) {
  #sidebar.show-sidebar #sidebar-toggle-button {
    left: calc(30% + 20px); /* Adjust the width of the sidebar as needed */
  }

  #sidebar-content {
    max-width: 30%;
  }
}

@media only screen and (max-width: 600px) {
  /* Set the toggle button to a fixed position in the header */
  #sidebar #sidebar-toggle-button {
    position: absolute;
    top: 208px;
    left: 20px;
    z-index: 1; /* TODO: Check if this is needed, see alert */
    font-size: 16px;
    transition: top 0.4s ease-in-out; /* Slide in with same speed as sidebar */
  }

  #sidebar.show-sidebar #sidebar-toggle-button {
    left: auto;
    right: 20px;
    top: 20px;
  }

  #sidebar-content {
    border: 3px solid var(--quaternary-color);
    max-width: 100%;
  }

  #sidebar-content #sidebar-header .logo img {
    width: 50%;
  }

  #sidebar-content #sidebar-header .name h1 {
    font-size: 40px;
  }

  #sidebar-content #sidebar-header .name #beta {
    font-size: 10px;
    top: -51px;
    left: -41px; /* Align the beta tag with the logo */
  }
}