/* To do bullet list in a side note:
<ul><s class="aside-in"><strong>Text</strong>
    <li>phrase 1
    <li>phrase 2
    <li>phrase 3 </li>
</s></ul>
*/

/*-Comments/Asides- source: ITS theme
Syntax to be used in the note: <s class="aside-...">text</s>
and replace ... with show or hide or in */

/*Show Aside - incorporates Brown's suggestion*/
.aside-show {
    text-decoration: unset;
    text-align: left;
    font-weight: unset;
    float: right;
    position: relative;
    margin-right: -21em;
    margin-bottom: .2em;
    clear: right;
    width: 250px; /* PB changed from 400 */
    /*background-color: var(--background-primary-alt);*/
    padding: 0.2em .7em 1em 1em; /* PB changed from padding: 1em >> the 4 values */ 
    box-shadow: .3em .3em var(--text-accent);
    font-size: 0.875rem; /* PB added this */
    border-radius: .25rem; /* PB added this as 4px orig.*/
}

/*Hide Aside and hover to reveal it*/
.aside-hide {
    text-decoration: unset;
    text-align: left;
    color: transparent;
    font-weight: unset;
    float: right;
    position: relative;
    margin: .5em;
    margin-right: -4rem; /* PB changed from the orig. -1.8em */
    margin-top: 0.1rem; /* PB added this */
    width: 1.5em;
    height: 1.5em;
    clear: right;
    overflow: hidden;
    background-color: var(--background-primary);
}

.aside-hide:before {
    display: block;
    /*border-bottom: 2px solid var(--background-modifier-border); PB uncommented*/
    content: "ℹ️ "; /* PB changed from 🗨 */
    color: red !important; /* PB changed from "none"; not clear why "red" shows true color */
    font-size: 1.3rem; /* PB changed from 12px */
    padding-top: .1em;
    padding-left: .3em;
}
.aside-hide:hover {
    white-space: normal;
    text-overflow: unset;
    color: unset;
    width: 250px; /* PB changed from 400 */
    height: unset;
    background-color: var(--background-primary-alt);
    padding: 1em;
    padding-top: .5em;
    z-index: 3;
    /*box-shadow: .5em .5em var(--outer-bar);*/
    border-right: 2px solid var(--interactive-accent);
    border-bottom: 2px solid var(--interactive-accent); /* PB added this */
    font-size: 14.5px; /* PB added this */
    border-radius: 4px; /* PB added this */
}

/*Aside Inside the Note*/
.aside-in {
    text-decoration: none !important;
    text-align: center;
    font-weight: unset;
    float: right;
    position: relative;
    margin-bottom: .2em;
    margin-right: .2em;
    clear: right;
    width: 16em;
    background-color: var(--background-primary-alt);
    padding: 1em;
    box-shadow: .3em .3em var(--text-accent);
    z-index: 3;
    font-size: 14.5px; /* PB added this */
    border-radius: 4px; /* PB added this */
}

.aside-in .internal-embed.is-loaded:not(.image-embed),
.aside-in .markdown-embed {
    width:100%;
}

/*Shrink Scrollbar*/
.aside > ::-webkit-scrollbar {
    width: 5px;
}