/*Globale variabler er sat i GENERAL.CSS*/

@media (prefers-color-scheme: dark){
  .sidebar-button img {
    filter: invert(100%);
  }
}

.sidebar {
  /*position: relative;*/
  position: fixed;
  left: 0;
  bottom: 0;
  top: calc(var(--sz-header-height) - 0.0em);
  
  background-color: var(--clr-sidebar-background);
  width: var(--sz-sidebar-width);
  z-index: 99;
  padding-top: 0.0rem;
  padding-bottom: 0.0rem;
  
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.2);
  /* background-image: var(--clr-gradient-dark); */
}

.sidebar-button {
  height: var(--sz-sidebar-button-height);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  padding-top: 0.15em;
  padding-bottom: 0.15em;
}

.sidebar-button:link {
  color:var(--clr-sidebar-background);
  text-decoration: none;
}
.sidebar-button:visited {
  color:var(--clr-sidebar-background);
  text-decoration: none;
}
/* .sidebar-button:focus, */
.sidebar-button:hover {
  background-color: var(--clr-sidebar-hover);
}

.sidebar-button img {
  height: 32px;
  margin-bottom: 4px;
}

.sidebar-button div {
  color: var(--clr-sidebar-color);
  font-size: 11.5px;
  font-weight:200;
}

.sidebar-button-home{
  display:none;
}

@media screen and (max-width: 500px) {
/* Nedenstående sker hvis skærmen er smald (telefon på højkant) */
  .sidebar{
    /*left:calc(var(--sz-sidebar-width) * (-1));*/
    transform: scale(0, 1);
    opacity: 1;
    border-right: 1.5px solid;
    border-color: var(--clr-body-background);
  }
  .sidebar-button{
    opacity: 0.25;
  }
  .sidebar-button-home{
    display:flex;
  }

  .sidebar-toggle-button {
    z-index: 9999;
    /* Allow it to gain focus, making it tabbable */
      position: absolute !important;
      top: -9999px !important;
      left: -9999px !important;
  }
  .sidebar-toggle-button:checked ~ .sidebar {
    /*transform: scale(1.5, 1);*/
    transform: scale(1.25, 1);
    transform-origin: left;
    transition: transform 400ms ease-in-out;
  }
  .sidebar-toggle-button:checked ~ .sidebar .sidebar-button {
    opacity: 1;
    transition: opacity 250ms ease-in-out 250ms;
    transform: scale(0.85, 1);
  }
  .sidebar-toggle-button:hover ~ .sidebar-toggle-button-label {
    width: var(--sz-sidebar-width);
    background: var(--clr-header-hover);
    color: none;
    cursor: pointer;
  }
/*   .sidebar-toggle-button:focus ~ .sidebar-toggle-button-label {
    outline: 3px solid rgba(red, .75);
  } */
  .sidebar-toggle-button:checked ~ .sidebar-toggle-button-label span {
    transform: scale(-1);
    padding-top: 0.0em;
    padding-bottom: 0.0em;
  }
  .sidebar-toggle-button-label {
    z-index: 400;
    display: flex;
    margin-left: 0em;
    margin-top: 0em;
    height:var(--sz-header-height);
    width:5em;

    background: rgba(255,255,255,0.01);
  }

}
@media screen and (max-height: 460px) {
  /* Nedenstående sker hvis skærmen er smald (telefon på lavkant) */
  .sidebar{
    /*left:calc(var(--sz-sidebar-width) * (-1));*/
    transform: scale(0, 1);
    opacity: 1;
  }
  .sidebar-button{
    opacity: 0.25;
  }
  .sidebar-button-home{
    display:flex;
  }
  .sidebar {
    z-index: 99;
    display:flex;
    flex-direction: row;
    position: absolute;
    top: calc(100vh - var(--sz-sidebar-width));
    justify-content:center;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 0.1rem;
    width: 100%;
    height: var(--sz-sidebar-width);
    
    border-top: 2.5px solid;
    border-color: var(--clr-body-background);

    /* padding-top: 0.8rem; */
  }
  .sidebar-button {
    width: calc(var(--sz-sidebar-width) + 0.2em);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
  }

  .sidebar-toggle-button {
    z-index: 9999;
    /* Allow it to gain focus, making it tabbable */
      position: absolute !important;
      top: -9999px !important;
      left: -9999px !important;
  }

  .sidebar-toggle-button:checked ~ .sidebar {
    transform: scale(1, 1);
    transform-origin: right;
    transition: transform 400ms ease-in-out;
    border-right: 1.5px solid;
    border-color: var(--clr-body-background);
  }
  .sidebar-toggle-button:checked ~ .sidebar .sidebar-button {
    opacity: 1;
    transition: opacity 250ms ease-in-out 250ms;
    transform: scale(1, 1);
  }
  .sidebar-toggle-button:hover ~ .sidebar-toggle-button-label {
    width: var(--sz-sidebar-width);
    background: var(--clr-header-hover);
    color: none;
    cursor: pointer;
  }
  /* .sidebar-toggle-button:focus ~ .sidebar-toggle-button-label {
    outline: 3px solid rgba(red, .75);
  } */
  .sidebar-toggle-button:checked ~ .sidebar-toggle-button-label span {
    transform: scale(-1);
    padding-top: 0.0em;
    padding-bottom: 0.0em;
  }
  .sidebar-toggle-button-label {
    z-index: 400;
    display: flex;
    position:relative;
    margin-left: 0em;
    margin-top: 0em;
    height:var(--sz-header-height);
    width:var(--sz-sidebar-width);
padding: .1em;
    align-items: center;
    background: rgba(255,255,255,0.01);
  }
  /* .sidebar-toggle-button-label span{
    font-size: 1.0rem;
    width: 100%;
    position:absolute;
    bottom: 0;
    text-align: center;
    color:var(--clr-header-color);
  } */

/*   .home-menu-button span{
    display: none;
  }
  .home-menu-button::after{
    content: "\00bb _Menu \00ab";
  } */
}