@inkline/inkline/components/IButtonGroup/css/index.css

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

/**
 * Button Group
 */
.button-group {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  box-sizing: border-box;
}
.button-group .button {
  position: relative;
  flex: 0 1 auto;
  z-index: 0;
  margin-right: 0;
  font-size: var(--button-group--font-size, var(--button--font-size));
  padding: var(--button-group--padding, var(--button-group--padding-top, var(--button--padding-top)) var(--button-group--padding-right, var(--button--padding-right)) var(--button-group--padding-bottom, var(--button--padding-bottom)) var(--button-group--padding-left, var(--button--padding-left)));
}
.button-group .button:hover, .button-group .button:focus, .button-group .button:active, .button-group .button.-active {
  z-index: 1;
}
.button-group .button.-circle {
  border-radius: 100%;
  width: var(--button--circle--size);
  height: var(--button--circle--size);
  padding: 0;
}
.button-group > .button:first-child {
  margin-left: 0;
}
.button-group.-block {
  display: flex;
  flex-basis: 100%;
}
.button-group.-block > .button {
  flex-basis: 100%;
}
.button-group > .button,
.button-group > .button-group > .button,
.button-group > [class$=-wrapper] .button {
  border-radius: 0;
}
.button-group:not(.-vertical) > .button:last-child,
.button-group:not(.-vertical) > [class$=-wrapper]:last-child > * > .button:last-child {
  border-top-right-radius: var(--button-group--border-top-right-radius, var(--button--border-top-right-radius));
  border-bottom-right-radius: var(--button-group--border-bottom-right-radius, var(--button--border-bottom-right-radius));
}
.button-group:not(.-vertical) > .button:first-child,
.button-group:not(.-vertical) > [class$=-wrapper]:first-child > * > .button:first-child {
  border-top-left-radius: var(--button-group--border-top-left-radius, var(--button--border-top-left-radius));
  border-bottom-left-radius: var(--button-group--border-bottom-left-radius, var(--button--border-bottom-left-radius));
}
.button-group:not(.-vertical) > .button:not(:last-child),
.button-group:not(.-vertical) > .button-group:not(:last-child) .button,
.button-group:not(.-vertical) > [class$=-wrapper]:not(:last-child) > * > .button,
.button-group:not(.-vertical) > .button-group:not(:last-child) [class$=-wrapper] > * > .button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.button-group:not(.-vertical) > .button:not(:first-child),
.button-group:not(.-vertical) > .button-group:not(:first-child) .button,
.button-group:not(.-vertical) > [class$=-wrapper]:not(:first-child) > * > .button,
.button-group:not(.-vertical) > .button-group:not(:first-child) [class$=-wrapper] > * > .button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.button-group.-vertical {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.button-group.-vertical .button,
.button-group.-vertical .button-group,
.button-group.-vertical [class$=-wrapper] {
  width: 100%;
}
.button-group.-vertical > .button:last-child,
.button-group.-vertical > [class$=-wrapper]:last-child > * > .button:last-child {
  border-bottom-left-radius: var(--button-group--border-bottom-left-radius, var(--button--border-bottom-left-radius));
  border-bottom-right-radius: var(--button-group--border-bottom-right-radius, var(--button--border-bottom-right-radius));
}
.button-group.-vertical > .button:first-child,
.button-group.-vertical > [class$=-wrapper]:first-child > * > .button:first-child {
  border-top-left-radius: var(--button-group--border-top-left-radius, var(--button--border-top-left-radius));
  border-top-right-radius: var(--button-group--border-top-right-radius, var(--button--border-top-right-radius));
}
.button-group.-vertical > .button:not(:last-child),
.button-group.-vertical > .button-group:not(:last-child) .button,
.button-group.-vertical > [class$=-wrapper]:not(:last-child) > * > .button,
.button-group.-vertical > .button-group:not(:last-child) [class$=-wrapper] > * > .button {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.button-group.-vertical > .button:not(:first-child),
.button-group.-vertical > .button-group:not(:first-child) .button,
.button-group.-vertical > [class$=-wrapper]:not(:first-child) > * > .button,
.button-group.-vertical > .button-group:not(:first-child) [class$=-wrapper] > * > .button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}