@smart-webcomponents-angular/buttongroup/styles/smart.buttongroup.css

[](https://jqwidgets.com/license/)

.smart-button-group{display:inline-flex;vertical-align:middle;width:var(--smart-button-group-default-width);height:var(--smart-button-group-default-height);cursor:pointer;text-transform:var(--smart-button-text-transform);letter-spacing:.08929em;overflow:hidden}.smart-button-group .smart-button-group-items{display:flex;align-items:center;height:100%;width:100%}.smart-button-group .smart-button-group-items .smart-button-group-item{display:flex;align-items:center;justify-content:center;position:relative;padding:var(--smart-button-padding);cursor:inherit;font-weight:inherit;-webkit-font-smoothing:antialiased;opacity:var(--smart-button-opacity);white-space:nowrap;border-radius:inherit;width:100%;height:100%}.smart-button-group .smart-button-group-items .smart-button-group-item>div{overflow:hidden;text-overflow:ellipsis;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.smart-button-group .smart-button-group-items .smart-button-group-item:hover{color:var(--smart-ui-state-color-hover);border-color:var(--smart-ui-state-border-hover);background-color:var(--smart-ui-state-hover);opacity:var(--smart-button-opacity-hover)}.smart-button-group .smart-button-group-items .smart-button-group-item[active]{color:var(--smart-ui-state-color-selected);border-color:var(--smart-ui-state-border-selected);background-color:var(--smart-ui-state-selected)}.smart-button-group .smart-button-group-items .smart-button-group-item:active{color:var(--smart-ui-state-color-active);border-color:var(--smart-ui-state-border-active);background-color:var(--smart-ui-state-active);opacity:var(--smart-button-opacity-active)}.smart-button-group.small .smart-button-group-items .smart-button-group-item{padding:var(--smart-button-small-padding);font-size:var(--smart-button-small-font-size)}.smart-button-group.large .smart-button-group-items .smart-button-group-item{padding:var(--smart-button-large-padding);font-size:var(--smart-button-large-font-size)}.smart-button-group:focus .smart-button-group-item[focus]:not(:active){color:var(--smart-ui-state-color-focus);border-color:var(--smart-ui-state-border-focus);background-color:var(--smart-ui-state-focus);opacity:var(--smart-button-opacity-focus)}.smart-button-group.primary{border-color:var(--smart-primary)}.smart-button-group.primary .smart-button-group-items .smart-button-group-item{color:var(--smart-primary-color);background-color:var(--smart-primary)}.smart-button-group.primary .smart-button-group-items .smart-button-group-item:hover{background-color:rgba(var(--smart-primary-rgb),.8)}.smart-button-group.primary .smart-button-group-items .smart-button-group-item:active,.smart-button-group.primary .smart-button-group-items .smart-button-group-item[active]{color:var(--smart-primary);border-color:var(--smart-ui-state-border-selected);background-color:rgba(var(--smart-primary-rgb),.2)}.smart-button-group.secondary{border-color:var(--smart-secondary)}.smart-button-group.secondary .smart-button-group-items .smart-button-group-item{color:var(--smart-secondary-color);background-color:var(--smart-secondary)}.smart-button-group.secondary .smart-button-group-items .smart-button-group-item:hover{background-color:rgba(var(--smart-secondary-rgb),.8)}.smart-button-group.secondary .smart-button-group-items .smart-button-group-item:active,.smart-button-group.secondary .smart-button-group-items .smart-button-group-item[active]{color:var(--smart-secondary);border-color:var(--smart-ui-state-border-selected);background-color:rgba(var(--smart-secondary-rgb),.2)}.smart-button-group.success{border-color:var(--smart-success)}.smart-button-group.success .smart-button-group-items .smart-button-group-item{color:var(--smart-success-color);background-color:var(--smart-success)}.smart-button-group.success .smart-button-group-items .smart-button-group-item:hover{background-color:rgba(var(--smart-success-rgb),.8)}.smart-button-group.success .smart-button-group-items .smart-button-group-item:active,.smart-button-group.success .smart-button-group-items .smart-button-group-item[active]{color:var(--smart-success);border-color:var(--smart-ui-state-border-selected);background-color:rgba(var(--smart-success-rgb),.2)}.smart-button-group.error{border-color:var(--smart-error)}.smart-button-group.error .smart-button-group-items .smart-button-group-item{color:var(--smart-error-color);background-color:var(--smart-error)}.smart-button-group.error .smart-button-group-items .smart-button-group-item:hover{background-color:rgba(var(--smart-error-rgb),.8)}.smart-button-group.error .smart-button-group-items .smart-button-group-item:active,.smart-button-group.error .smart-button-group-items .smart-button-group-item[active]{color:var(--smart-error);border-color:var(--smart-ui-state-border-selected);background-color:rgba(var(--smart-error-rgb),.2)}.smart-button-group.info{border-color:var(--smart-info)}.smart-button-group.info .smart-button-group-items .smart-button-group-item{color:var(--smart-info-color);background-color:var(--smart-info)}.smart-button-group.info .smart-button-group-items .smart-button-group-item:hover{background-color:rgba(var(--smart-info-rgb),.8)}.smart-button-group.info .smart-button-group-items .smart-button-group-item:active,.smart-button-group.info .smart-button-group-items .smart-button-group-item[active]{color:var(--smart-info);border-color:var(--smart-ui-state-border-selected);background-color:rgba(var(--smart-info-rgb),.2)}.smart-button-group.warning{border-color:var(--smart-warning)}.smart-button-group.warning .smart-button-group-items .smart-button-group-item{color:var(--smart-warning-color);background-color:var(--smart-warning)}.smart-button-group.warning .smart-button-group-items .smart-button-group-item:hover{background-color:rgba(var(--smart-warning-rgb),.8)}.smart-button-group.warning .smart-button-group-items .smart-button-group-item:active,.smart-button-group.warning .smart-button-group-items .smart-button-group-item[active]{color:var(--smart-warning);border-color:var(--smart-ui-state-border-selected);background-color:rgba(var(--smart-warning-rgb),.2)}.smart-button-group.light{border-color:var(--smart-light)}.smart-button-group.light .smart-button-group-items .smart-button-group-item{color:var(--smart-light-color);background-color:var(--smart-light)}.smart-button-group.light .smart-button-group-items .smart-button-group-item:hover{background-color:rgba(var(--smart-light-rgb),.8)}.smart-button-group.light .smart-button-group-items .smart-button-group-item:active,.smart-button-group.light .smart-button-group-items .smart-button-group-item[active]{color:var(--smart-light);border-color:var(--smart-ui-state-border-selected);background-color:rgba(var(--smart-light-rgb),.2)}.smart-button-group.dark{border-color:var(--smart-dark)}.smart-button-group.dark .smart-button-group-items .smart-button-group-item{color:var(--smart-dark-color);background-color:var(--smart-dark)}.smart-button-group.dark .smart-button-group-items .smart-button-group-item:hover{background-color:rgba(var(--smart-dark-rgb),.8)}.smart-button-group.dark .smart-button-group-items .smart-button-group-item:active,.smart-button-group.dark .smart-button-group-items .smart-button-group-item[active]{color:var(--smart-dark);border-color:var(--smart-ui-state-border-selected);background-color:rgba(var(--smart-dark-rgb),.2)}.smart-button-group:not([animation=none]) .smart-button-group-item{transition:background-color .1s linear,box-shadow 280ms ease-in-out}.smart-button-group[right-to-left] .smart-button-group-items{direction:rtl}