/*
==================================================
==================== ASIDE =======================
==================================================
 Floating side navigation with icons & tooltips

Table of Content (Aside):
0. Wrapper
  0.1 Aside Base Positioning
  0.2 RTL Adjustment
  0.3 Open State
1. Aside List
  1.1 List Layout
2. Aside Links
  2.1 Link Styling
  2.2 Link Hover Effect
  2.3 Icon Styling
3. Tooltips
  3.1 Tooltip Base
4. Media Queries
  4.1 Desktop Layout (≥768px)
  4.2 Tooltip Position (LTR & RTL)
  4.3 Tooltip Hover Behavior
==================================================
*/

/* ============================================
   0. WRAPPER
============================================ */

/* --- 0.1 Aside Base Positioning --- */
.site__aside {
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 1000;
    min-height: calc(100vh - 60px);
    padding: var(--spacing-md);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-110%);
    transition: var(--transition-slow);
}

/* --- 0.2 RTL Adjustment --- */
html[dir="rtl"] .site__aside {
    left: auto;
    right: 0;
}

/* --- 0.3 Open State --- */
.site__aside.asideIsOpen {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    background: var(--site-bg-gradient);
}
/* ============================================
   1. ASIDE LIST
============================================ */

/* --- 1.1 List Layout --- */
.site__aside-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
}

/* ============================================
   2. ASIDE LINKS
============================================ */

/* --- 2.1 Link Styling --- */
.site__aside-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-md);
    position: relative;
    transition: var(--transition-normal);
}

/* --- 2.2 Link Hover Effect --- */
.site__aside-link:hover {
    transform: scale(1.1);
}

/* --- 2.3 Icon Styling --- */
.site__aside-icon {
    color: var(--color-text-inverse);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

/* ============================================
   3. TOOLTIPS
============================================ */

/* --- 3.1 Tooltip Base --- */
.site__aside-tooltip {
    display: none;
}

/* ============================================
   4. MEDIA QUERIES
   Desktop Behaviors (≥768px)
============================================ */

@media (min-width: 768px) {

    /* --- 4.1 Desktop Layout --- */
    .site__aside {
        transform: none;
        width: auto;
        height: auto;
        visibility: visible;
        opacity: 1;
    }

    .site__aside-list {
        gap: var(--spacing-xxl);
    }

    .site__aside-icon {
        font-size: var(--font-size-xl);
    }

    /* --- 4.2 Tooltip Position --- */
    .site__aside-tooltip {
        display: inline;
        position: absolute;
        top: 0;
        right: -220%;
        opacity: 0;
        visibility: hidden;
        background-color: var(--color-bg-dark);
        color: var(--color-text-inverse);
        border-radius: var(--radius-xl);
        width: 4.8rem;
        padding: var(--spacing-xxs);
        text-transform: capitalize;
        text-align: center;
    }

    html[dir="rtl"] .site__aside-tooltip {
        right: auto;
        left: -220%;
    }

    /* --- 4.3 Tooltip Hover Behavior --- */
    .site__aside-link:hover .site__aside-tooltip {
        opacity: 1;
        visibility: visible;
    }
}