.Drawer-Panel {
  position: fixed;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(2px);
  z-index: 9999999999;
  inset: 0;
  background: rgb(0 0 0 / 58%);
  opacity: 0;
  visibility: hidden;

  &.Open-Panel {
    opacity: 1;
    visibility: visible;
  }

  & .panal {
    width: 350px;
    height: 100%;
    background: #fff;
    padding: 0 10px;
    overflow: scroll;

    /* Close */
    & .Drawer-Panel_Close {
      padding: 1rem;
      direction: rtl;
      cursor: pointer;
    }

    /* User Profile */
    & .user-card {
      padding: 1.5rem 0;
      background: #f9fafb;

      & .user-info {
        display: flex;
        align-items: center;
        gap: 1rem;

        & .avatar-wrapper {
          position: relative;

          & .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
          }

          & .status-indicator {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 12px;
            height: 12px;
            background: #22c55e; /* green-500 */
            border-radius: 50%;
            border: 2px solid #ffffff;
          }
        }

        & * {
          font-family: sans-serif;
          text-transform: uppercase;
        }

        & .user-name {
          font-size: 0.775rem;
          font-weight: 700;
          color: #0f172a;
          margin: 0;
        }

        & .user-email {
          margin-top: 5px;

          & a {
            color: #64748b;
            font-size: 0.675rem;
          }
        }
      }
    }
  }
}