@use "./variables" as *;

.#{$component-prefix}action-bar-button-group {
  display: flex;
  flex: 1;

  > .#{$component-prefix}action-bar-button {
    margin: 0;
    border-radius: 0;

    &:first-child {
      margin-left: 5px * $hd;
    }

    &:last-child {
      margin-right: 5px * $hd;
    }
  }

  &--square {
    > .#{$component-prefix}action-bar-button {
      &:first-child {
        border-top-left-radius: $action-bar-button-border-radius-md;
        border-bottom-left-radius: $action-bar-button-border-radius-md;
      }

      &:last-child {
        border-top-right-radius: $action-bar-button-border-radius-md;
        border-bottom-right-radius: $action-bar-button-border-radius-md;
      }
    }
  }

  &--round {
    > .#{$component-prefix}action-bar-button {
      &:first-child {
        border-top-left-radius: $action-bar-button-border-radius-max;
        border-bottom-left-radius: $action-bar-button-border-radius-max;
      }

      &:last-child {
        border-top-right-radius: $action-bar-button-border-radius-max;
        border-bottom-right-radius: $action-bar-button-border-radius-max;
      }
    }
  }
}