*[data-button-bar=button-bar] {
    display: inline-flex;
    gap: 0;
    align-items: center;
    border: solid 1px lightblue;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    & > * {
        border-radius: 10px;
        padding: 5px;
        cursor: pointer;
        &:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius:0;
        }
        &:last-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        &[data-item=selected-item] {
            background-color: lightblue;
        }
    }
}