/** User menu and pings menu in the right menu **/

/* Sliding menus (user menu, pings, login form) */

.userMenu, .pingsSlider
{
   position: fixed;
   float: right;
   right: 0;
   top: 0;
   height: 100%;
   border-left: 1px solid #646464;
   overflow: auto;
   box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.75);
   z-index: 30;

   :nth-last-child(1 of .separator) {
      border-bottom: 2px solid var(--current-page-color, white);
   }
}

.userMenu
{
   width: 300px;
   background-color: black;
   color: white;
   transform: translateX(310px);
   transition: transform 250ms ease-in-out;

   > ul > li:last-child {
      margin-top: 2rem!important;
   }
}

.pingsSlider
{
   width: 350px;
   background-color: white;
   color: var(--link-color);
   transform: translateX(+360px);
   transition: transform 250ms ease-in-out;
}

.headerSlider {
   display: flex;
   align-items: center;
   width: 100%;

   label {
      display: inline-block;
      width: 25px;
      aspect-ratio: 1;
      transition: color var(--transition-time);

      &:hover, &:focus {
         color: oklch(from currentColor calc(l * .65) c h);
      }
   }
}

.userMenuToggle, .pingsToggle
{
   position: absolute;
   z-index: 31;
   margin: 0px;
   opacity: 0;
   left: -9999px;
}

/* Transformations upon checking the hidden checkboxes */

.userMenuToggle
{
   &:checked {
      ~ .userMenu {
         transform: translateX(0px);
      }

         ~ label[for="userMenu"] {
         opacity: var(--link-hover-opacity);
      }
   }

   &:focus ~ label[for="userMenu"] {
      opacity: var(--link-hover-opacity);
      outline: auto;
   }
}

.pingsToggle
{
   &:checked {
      ~ .pingsSlider {
         transform: translateX(0px);
      }

         ~ label[for="pingsMenu"] {
         opacity: var(--link-hover-opacity);
      }
   }

   &:focus ~ label[for="pingsMenu"] {
      opacity: var(--link-hover-opacity);
      outline: auto;
   }
}

label[for="pingsMenu"], label[for="userMenu"] {
   transition: opacity 250ms ease-in-out;

   &:hover, &:focus {
      opacity: var(--link-hover-opacity);
   }
}

/* Style for ul/li in the hamburger menus */

#userCorner :is(.userMenu, .pingsSlider) {
    ul 
    {
        display: block;
        margin: 0px 0px 0px 5px;
        padding: 0px 5px;
        text-align: left;
    }

    li
    {
        list-style-type: none;
        display: block;
        margin-top: 0px;
        padding: 10px 10px 5px 5px;
        text-align: left;
        font-size: 1rem; /* ~16px */
    }

    i
    {
        margin-right: 5px;
    }
}

#userCorner li {
    a
    {
        font-size: 1rem; /* ~16px */
        text-decoration: none;
        color: white;

        &:is(:hover, :focus) {
            color: #c8c8c8;
        }
    }
}

#userCorner li .adminLink
{
   color: var(--admin-link-color);
}

#userCorner .avatarMini
{
   height: 40px;
   width: 40px;
   padding: 0px;
   border-radius: 50%;
}

.rightMenuPanel i
{
   display: inline-block;
   font-size: 1.625rem; /* ~26px */
   color: inherit;
   margin: 0px 10px 0px 0px;
   vertical-align: -10%;
   cursor: pointer;
}

/* Miscellaneous for the top bar (e.g., colors for pings slider) */

#userCorner h6 a
{
   text-decoration: none;
   color: white;

   &:is(:hover, :focus)
  {
    cursor: pointer;
    color: #00ffff;
  }
}

#userCorner sup
{
   font-size: 0.75rem; /* ~12px */
   padding-left: 5px;
   color: #34b1e5;
}

#userCorner .pingsSlider {
    :is(li, a)
    {
        color: var(--link-color);
    }

    a:hover
    {
        color: black;
    }
}

.adminTools {
    border: 1px solid var(--admin-link-color);
    border-radius: var(--border-radius);
    position: relative;

    &::after {
        content: "Administration";
        background-color: black;
        border-radius: var(--border-radius);
        position: absolute;
        right: 0.5rem;
        top: -0.75rem;
        padding-inline: 0.35rem;
        font-size: 0.8rem;
    }
}