:host {
    display: flex;
    position: relative;
}

:host .default-light-color {
    color: #FBDB10;
}

:host .default-dark-color {
    color: #E8E8E8;
}

.star-light-area span, .star-dark-area span {
    box-sizing: content-box;
    padding-right: 4px;
}

:host .f-star-sm {
    font-size: 14px;
}

:host .f-star-md {
    font-size: 16px;
}

:host .f-star-lg {
    font-size: 18px;
}

:host .f-star-exlarge{
    font-size: 24px;
}

:host .star-dark-area {
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
}

/* :host .small {
    width: 90px;
}

:host .middle {
    width: 100px;
}

:host .large {
    width: 110px;
} */

:host .f-utils-fill {
    padding-left: 2px;
    font-size: 14px;
}

:host .font-small {
    line-height: 14px;
}

:host .font-middle {
    line-height: 16px;
}

:host .font-large {
    line-height: 18px;
}

:host .font-exlarge{
    line-height:24px;
}


:host .star-light-area {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 0%;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
}

:host .star-light-area span, :host .star-dark-area span {
    flex-shrink: 0;
}