:root{--rating-size:3rem;--bar-size:.2rem;--background-color:#e7f2fa;--rating-color-default:#2980b9;--rating-color-background:#fff;--rating-color-good:#000;--rating-color-meh:#f1c40f;--rating-color-bad:#e74c3c;--rating-backgd-good:#e9620e}.rating{position:relative;display:flex;align-items:center;justify-content:center;border-radius:100%;overflow:hidden;background:var(--rating-color-default);color:var(--rating-color-default);width:var(--rating-size)!important;height:var(--rating-size);position:absolute;top:14px;right:11px;font-size:calc(var(--rating-size) / 3);line-height:1}.rating span{position:relative;display:flex;font-weight:500;z-index:2}.rating span small{font-size:.5em;font-weight:900;align-self:center}.rating::after{content:"";position:absolute;top:var(--bar-size);right:var(--bar-size);bottom:var(--bar-size);left:var(--bar-size);background:var(--background-color);border-radius:inherit;z-index:1}.rating::before{content:"";position:absolute;top:var(--bar-size);right:var(--bar-size);bottom:var(--bar-size);left:var(--bar-size);border-radius:inherit;box-shadow:0 0 0 1rem var(--rating-color-background);z-index:-1}.rating.good{background:var(--rating-backgd-good);color:var(--rating-color-good)}.rating.meh{background:var(--rating-color-meh);color:var(--rating-color-meh)}.rating.bad{background:var(--rating-color-bad);color:var(--rating-color-bad)}