smart-webcomponents-react/source/styles/default/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 100ms linear, box-shadow 280ms ease-in-out;
}

.smart-button-group[right-to-left] .smart-button-group-items {
  direction: rtl;
}

/*# sourceMappingURL=smart.buttongroup.css.map */