/* Button Group component styles and tokens */
@import (optional) url('../../../../components/basic/button-group.less');
@import (optional) url('../../../../generated/variables/mobile/components/button-group.variant.less');

.app-button-group {
    display: inline-flex;
    border-radius: var(--wm-button-group-radius);
    border-width:  var(--wm-button-group-border-width);
    border-style: var(--wm-button-group-border-style);
    border-color: var(--wm-button-group-border-color);

    .btn {
      border-radius: 0;
      background-color: var(--wm-btn-background);

      &:first-of-type {
        border-top-left-radius: var(--wm-button-group-radius);
        border-bottom-left-radius: var(--wm-button-group-radius);
      }

      &:last-of-type {
        border-top-right-radius: var(--wm-button-group-radius);
        border-bottom-right-radius: var(--wm-button-group-radius);
      }
    }

    &.btn-group-vertical {
      flex-direction: column;

      .btn {
        border-radius: 0;
        width: 100%;

        &:first-of-type {
          border-top-left-radius: var(--wm-button-group-radius);
          border-top-right-radius: var(--wm-button-group-radius);
          border-bottom-left-radius: 0;
        }

        &:last-of-type {
          border-top-right-radius: 0;
          border-bottom-left-radius: var(--wm-button-group-radius);
          border-bottom-right-radius: var(--wm-button-group-radius);
        }
      }
    }
}
