@import '../../style/variable';

.#{$namespace} {
  &-button-group {
    position: relative;

    &--fit {
      display: flex;
      flex-direction: row;
      align-items: center;

      gap: 8px;
    }
  }

  &-gbutton {
    display: inline-block;
    padding-left: 16px;
    padding-right: 16px;
    height:  40px;
    line-height: 40px;

    outline: none;
    border: 1px solid transparent;
    border-radius: 8px;

    font-weight: 500;
    font-size: 14px;
    color: rgba(0,0,0,0.65);

    text-align: center;

    cursor: pointer;

    &:not(&--fit):not(:last-child) {
      margin-right: 8px;
    }

    &--showBG {
      background: rgba(0,0,0,0.05);
    }

    &--active {
      background: rgba(0,103,238,0.05);
      color: #0067EE;
    }

    &--active:is(&--bordered) {
      border-color: #0067EE;
    }

    &--fit {
      flex: 1;
    }
  }
}