@mixin ButtonGroupElement($direction, $selectedBorderRadius) {
  .ts-button {
    --ts-button--content-color: white;
    background: transparent;
    border-radius: 0;
    height: 100%;
    min-height: unset;

    &.selected {
      border-radius: $selectedBorderRadius;
      background: gray;

      &:not(.disabled) + .separator {
        opacity: 0;
      }
    }

    &:disabled {
      --ts-button--content-color: #c2c2c2;
      background: #cdcdcd;
      cursor: not-allowed;
    }
  }

  .separator {
    flex-shrink: 0;
    background: black;
    transition: 300ms opacity ease-out;

    @if ($direction == 'horizontal') {
      height: 100%;
      width: 2px;
    }

    @if ($direction == 'vertical') {
      width: 100%;
      height: 2px;
    }

    &.invisible {
      opacity: 0;
    }
  }
}

.ts-button-group {
  display: flex;

  &.horizontal {
    height: 32px;
    @include ButtonGroupElement('horizontal', 2px);
  }

  &.vertical {
    flex-direction: column;
    @include ButtonGroupElement('vertical', 2px);
  }
}