vuestic-ui/dist/es/VaButtonGroup.css

Vue 3 UI Framework

:root,
:host {
  --va-button-group-display: flex;
  --va-button-group-justify-content: stretch;
  --va-button-group-border-radius: 999px;
  --va-button-group-gap: 0.25rem;
  /* Button */
  --va-button-group-button-margin: 0;
  --va-button-group-button-width: auto;
  --va-button-group-button-padding: 0.25rem;
}
.va-button-group {
  display: var(--va-button-group-display);
  justify-content: var(--va-button-group-justify-content);
  border-radius: var(--va-button-group-border-radius);
  font-family: var(--va-font-family);
  width: -moz-max-content;
  width: max-content;
  background: var(--va-background-color);
}
.va-button-group--grow {
  width: 100%;
  --va-button-group-button-width: 100%;
}
.va-button-group--square {
  border-radius: var(--va-button-border-radius);
}
.va-button-group--small.va-button-group--square {
  border-radius: var(--va-button-sm-border-radius);
}
.va-button-group--large.va-button-group--square {
  border-radius: var(--va-button-lg-border-radius);
}
.va-button-group .va-button {
  margin: var(--va-button-group-button-margin);
  width: var(--va-button-group-button-width);
  box-shadow: none;
  outline: none;
}
.va-button-group .va-button:focus-visible {
  outline: none !important;
}
.va-button-group .va-button:focus-visible::before {
  outline: 2px solid var(--va-focus) !important;
  border-radius: "inherit";
  outline-offset: -2px;
}
.va-button-group > .va-button:last-child {
  padding-right: var(--va-button-group-button-padding);
}
.va-button-group > .va-button:first-child {
  padding-left: var(--va-button-group-button-padding);
}
.va-button-group > .va-button:not(:last-child) {
  padding-right: var(--va-button-group-gap);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.va-button-group > .va-button:not(:last-child) .va-button__content {
  margin-right: 0;
}
.va-button-group > .va-button + .va-button {
  padding-left: var(--va-button-group-gap);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}
.va-button-group > .va-button + .va-button .va-button__content {
  margin-left: 0;
}