:root{--star-circle-border:#b0b0b0;--star-circle-border-active:#ffc107;--star-circle-bg:transparent;--star-circle-bg-active:transparent;--star-icon-color:var(--star-circle-border);--star-icon-color-active:#ffc107;--star-icon-stroke-width:1px;--star-icon-stroke:var(--star-circle-border);--star-icon-stroke-active:var(--star-icon-color-active);--star-size:1.2rem}.favorite-paragraph-btn{width:calc(var(--star-size) * 1.5);height:calc(var(--star-size) * 1.5);border:2px solid var(--star-circle-border);border-radius:50%;background:var(--star-circle-bg);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border .15s ease,background .15s ease}.favorite-paragraph-btn i{font-size:var(--star-size);color:var(--star-icon-color);-webkit-text-stroke:var(--star-icon-stroke-width) var(--star-icon-stroke);transition:color .15s ease,-webkit-text-stroke .15s ease}.favorite-paragraph-btn:not(.active):hover{background:var(--star-circle-border)}.favorite-paragraph-btn:not(.active):hover i{color:#fff}.favorite-paragraph-btn.active{border-color:var(--star-circle-border-active);background:var(--star-circle-bg-active)}.favorite-paragraph-btn.active i{color:var(--star-icon-color-active);-webkit-text-stroke:var(--star-icon-stroke-width) var(--star-icon-stroke-active)}