/* Copyright (c) 2021 Read Write Tools. Legal use subject to the Favorites DOM Component Software License Agreement. */
:host{--pure-black:#000;--nav-black:#111;--light-black:#171717;--medium-black:#222;--black:#333;--dark-gray:#555;--gray:#777;--white:#ccc;--pure-white:#fff;--js-blue:#76afe8;--title-blue:#42affa;--yellow:#ffffa4;--red:#ff3d3d;--color:var(--white);--accent-color1:var(--yellow);--accent-color2:var(--js-blue);--background:var(--black);--accent-background1:var(--medium-black);--accent-background2:var(--pure-black);--accent-background3:var(--nav-black);--accent-background4:var(--black);--width:70vw;--height:50vh;--bottom:1rem;--right:1rem;--caption-bar-height:1.5rem;--favitem-height:4.5rem;--message-height:1.5rem;--favitem-star-width:3rem}
#favorite-dialog{position:fixed;bottom:var(--bottom);right:var(--right);width:var(--width);max-width:40rem;height:var(--height);max-height:40rem;box-sizing:border-box;background-color:var(--background);border-width:1px;border-style:solid;border-color:var(--gray) var(--accent-background2) var(--accent-background2) var(--gray);box-shadow:-2px -2px 2px var(--accent-background2),5px 5px 8px var(--accent-background2);z-index:1;cursor:default}
#favorite-dialog *{font-family:'Source Sans Pro',sans-serif;box-sizing:border-box}
#caption-bar{display:flex;background-color:var(--accent-background1);width:100%;height:var(--caption-bar-height);border-bottom:1px solid var(--accent-background2)}
#caption{font-family:'Source Sans Pro',sans-serif;font-size:.9rem;font-weight:700;letter-spacing:1px;text-align:center;margin:0;line-height:1.6;color:var(--color);width:calc(100% - var(--caption-bar-height))}
#close-button{font-family:'Source Sans Pro',sans-serif;font-size:.8rem;font-weight:700;text-align:center;display:inline-block;padding:.15rem .75rem;color:var(--color);background-color:var(--accent-background2);border-style:solid;border-width:1px;border-color:var(--accent-background1);cursor:pointer}
#close-button:hover,#close-button:visited:hover{color:var(--pure-white);background-color:var(--red);border:1px solid var(--accent-background2)}
#favorite-docs{width:100%;height:calc(100% - var(--caption-bar-height) - var(--message-height));overflow-y:auto;position:absolute}
#favorite-docs .favitem{border-bottom:1px solid var(--accent-background2);width:100%;height:var(--favitem-height);background-color:var(--accent-background4)}
#favorite-docs button.open-star:before{animation-name:pulsate;animation-duration:3s;animation-iteration-count:infinite;content:'☆'}
#favorite-docs button.filled-star:before{content:'★'}
#favorite-docs button.open-star{right:0;animation-name:make-favorite;animation-duration:.5s;animation-timing-function:ease-in}
#favorite-docs button.filled-star{left:0;animation-name:discard-favorite;animation-duration:.5s;animation-timing-function:ease-in}
#favorite-docs button.no-animation{animation-duration:0s!important}
#favorite-docs button{font-family:'Source Sans Pro',sans-serif;font-size:1.5rem;text-align:center;position:absolute;width:var(--favitem-star-width);height:var(--favitem-height);color:var(--color);background-color:var(--accent-background4);border-width:0 1px 1px 1px;border-style:solid;border-color:var(--accent-background2);outline:0}
#favorite-docs button:hover{background-color:var(--accent-background3)}
#favorite-docs a{position:absolute;width:calc(100% - 2 * var(--favitem-star-width));margin-left:var(--favitem-star-width);height:var(--favitem-height);display:inline-block;font-size:1rem;text-decoration:none;padding:.5rem 1rem;cursor:pointer}
#favorite-docs a:hover{background-color:var(--accent-background3)}
#favorite-docs p.textline{font-size:.9rem;margin:0;height:calc(.6 * var(--favitem-height));overflow-y:hidden;line-height:1.4}
#favorite-docs .title{color:var(--accent-color1);padding-right:1rem}
#favorite-docs .description{color:var(--color)}
#favorite-docs p.url{color:var(--accent-color2);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left;margin:0}
@keyframes make-favorite{
from{right:calc(100% - var(--favitem-star-width))}
to{right:0}
}
@keyframes discard-favorite{
from{left:calc(100% - var(--favitem-star-width))}
to{left:0}
}
@keyframes pulsate{
0%{color:var(--accent-color2);content:'☆'}
100%{color:var(--accent-color1);content:'★'}
}
#favorite-message{width:100%;height:var(--message-height);overflow:hidden;position:absolute;bottom:0;background-color:var(--accent-background1)}
#favorite-message p{margin:0;font-size:.75rem;color:var(--color);text-align:center;border-top:1px solid var(--accent-background2);padding:.25rem 0 0 0}