/* Sidebar icon-only mode: a button at the top of the sidebar narrows it to icons; the choice is kept in localStorage.
   The arrow of the button points to the side the sidebar sits on (left in English, right in Arabic) while the
   sidebar is open, and the other way while it is icon-only. */

aside.side-bar {
    transition: width 0.2s ease;
}

.sidebar-header {
    position: relative;
    flex-shrink: 0;
}

.sidebar-icon-toggle {
    position: absolute;
    top: 50%;
    inset-inline-end: 0.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sidebar-icon-toggle:hover,
.sidebar-icon-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.32);
    outline: none;
}

.sidebar-icon-toggle svg {
    width: 1.35rem;
    height: 1.35rem;
    transition: transform 0.2s ease;
}

/* The drawn icon is the English one (panel on the left, arrow pointing left). */
html[dir="rtl"] .sidebar-icon-toggle svg {
    transform: scaleX(-1);
}

body.sidebar-icons-only .sidebar-icon-toggle svg {
    transform: scaleX(-1);
}

html[dir="rtl"] body.sidebar-icons-only .sidebar-icon-toggle svg {
    transform: scaleX(1);
}

/* ---- icon-only mode ---- */
body.sidebar-icons-only aside.side-bar {
    width: 4.5rem !important;
}

body.sidebar-icons-only aside.side-bar .side-bar-heading,
body.sidebar-icons-only aside.side-bar #sidebar-search-wrap,
body.sidebar-icons-only aside.side-bar #sidebar-no-results,
body.sidebar-icons-only aside.side-bar #side-bar .tw-truncate,
body.sidebar-icons-only aside.side-bar #side-bar .drop_down > svg.svg,
body.sidebar-icons-only aside.side-bar #side-bar .chiled,
body.sidebar-icons-only aside.side-bar #side-bar > div.tw-uppercase {
    display: none !important;
}

body.sidebar-icons-only aside.side-bar .sidebar-header > a {
    min-height: 3.75rem;
}

body.sidebar-icons-only .sidebar-icon-toggle {
    inset-inline-end: 50%;
    transform: translate(50%, -50%);
}

html[dir="rtl"] body.sidebar-icons-only .sidebar-icon-toggle {
    transform: translate(-50%, -50%);
}

body.sidebar-icons-only aside.side-bar #side-bar {
    padding-inline: 0.5rem;
}

body.sidebar-icons-only aside.side-bar #side-bar a {
    justify-content: center;
    padding-inline: 0.25rem;
}

body.sidebar-icons-only aside.side-bar #side-bar a svg,
body.sidebar-icons-only aside.side-bar #side-bar a i {
    margin: 0;
}

@media (max-width: 1023px) {
    .sidebar-icon-toggle {
        display: none;
    }
}