:host {
    display:inline-block;
    font-size: .5rem;
    min-width: .7rem;
    height: .7rem;
    padding: .2rem;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    box-shadow: 0 0 1px #333;
}

:host([kind='primary']) {
    background-color: var(--gcl-color-primary);
    color: var(--gcl-color-on-primary);
}

:host([kind='secondary']) {
    background-color: var(--gcl-color-secondary);
    color: var(--gcl-color-on-secondary);
}

:host([kind='tertiary']) {
    background-color: var(--gcl-color-tertiary);
    color: var(--gcl-color-on-tertiary);
}