/*
 * Left sidebar: the mobile app's Iconsax icons (iconsax_plus, MIT licence in
 * fonts/iconsax/LICENSE.txt), one colour, no coloured artwork.
 * Linear glyph normally, Bold glyph on the current page (like the app's
 * bottom navigation). The fonts are subset to the sidebar's glyphs only.
 */

@font-face {
    font-family: 'IconsaxPlusLinear';
    src: url('../fonts/iconsax/iconsax-linear.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'IconsaxPlusBold';
    src: url('../fonts/iconsax/iconsax-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.left-sidebar > ul > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    margin: 2px 0;
    border-radius: 10px;
    font-size: 15px;
    line-height: 22px;
    color: inherit;
}

.left-sidebar > ul > li > a:hover {
    background: rgba(0, 0, 0, 0.05);
}

.left-sidebar > ul > li > a:focus-visible {
    outline: 2px solid var(--plyr-color-main, currentColor);
    outline-offset: 2px;
}

.wo-ix {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    opacity: 0.8;
}

.wo-ix i {
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* style.phtml paints every `.left-sidebar ul li a i` in the brand colour
   (!important); the icons follow the link's text colour instead. */
.left-sidebar ul li a .wo-ix i {
    color: inherit !important;
}

.wo-ix .wo-ix-l {
    font-family: 'IconsaxPlusLinear';
}

.wo-ix .wo-ix-b {
    font-family: 'IconsaxPlusBold';
    display: none;
}

/* Current page: bold glyph and the site's brand colour. */
.left-sidebar > ul > li > a.active {
    font-weight: 600;
    color: var(--plyr-color-main, inherit);
    background: rgba(0, 0, 0, 0.05);
}

.left-sidebar > ul > li > a.active .wo-ix {
    opacity: 1;
}

.left-sidebar > ul > li > a.active .wo-ix-l {
    display: none;
}

.left-sidebar > ul > li > a.active .wo-ix-b {
    display: inline;
}

/* The News Feed row also holds the post-order dropdown arrow. */
.left-sidebar > ul > li.wow_side_post_fltr {
    position: relative;
}