/* 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');

.wm-app {
  .app-button-group {
    display: inline-flex !important;
    border-radius: var(--wm-button-group-radius) !important;

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

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

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

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

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

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

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