$amosBtnPrefix: amos-btn;
$btnbar-border-radius: 4px;

// default button group
.amos-button-group {
  display: inline-block;

  .#{$amosBtnPrefix} {
    margin-left: 0;
    border-right-width: 0;
    border-radius: 0;

    &:first-child {
      border-bottom-left-radius: $btnbar-border-radius;
      border-top-left-radius: $btnbar-border-radius;
    }

    &:last-child {
      border-right-width: 1px;
      border-top-right-radius: $btnbar-border-radius;
      border-bottom-right-radius: $btnbar-border-radius;
    }
  }


  &-tight {
    .amos-btn {
      padding: 0 6px;
    }
  }
}

// multi button group
.amos-multi-button-group {
  display: inline-block;

  .#{$amosBtnPrefix} {
    margin-left: 0;
    border-right-width: 0;
    border-radius: 0;

    + .#{$amosBtnPrefix} {
      border-left: 1px solid #dadada;
    }

    &:first-child {
      border-bottom-left-radius: $btnbar-border-radius;
      border-top-left-radius: $btnbar-border-radius;
    }

    &:last-child {
      border-right-width: 1px;
      border-top-right-radius: $btnbar-border-radius;
      border-bottom-right-radius: $btnbar-border-radius;
    }
  }
}

// bar group

.amos-button-bar-group-multiple {
  .#{$amosBtnPrefix} {
    + .#{$amosBtnPrefix} {
      border-left: 1px solid #dadada;
    }
  }
}

.amos-button-bar-group {
  display: inline-block;

  .#{$amosBtnPrefix} {
    margin-left: 0;
    border-right-width: 0;
    border-radius: 0;

    &:first-child {
      border-bottom-left-radius: $btnbar-border-radius;
      border-top-left-radius: $btnbar-border-radius;
    }

    &:last-child {
      border-right-width: 1px;
      border-top-right-radius: $btnbar-border-radius;
      border-bottom-right-radius: $btnbar-border-radius;
    }
  }
}

.amos-button-bar-group-haslabel {
  display: inline-block;

  &.label-in-right {
    .bar-group-label {
      margin-right: 0;
      margin-left: 1em;
    }
  }

  .bar-group-label {
    display: inline-block;
    margin-right: 1em;
  }

  .bar-group-content {
    display: inline-block;

    .#{$amosBtnPrefix} {
      margin-left: 0;
      border-right-width: 0;
      border-radius: 0;

      &:first-child {
        border-bottom-left-radius: $btnbar-border-radius;
        border-top-left-radius: $btnbar-border-radius;
      }

      &:last-child {
        border-right-width: 1px;
        border-top-right-radius: $btnbar-border-radius;
        border-bottom-right-radius: $btnbar-border-radius;
      }
    }
  }
}

// use tag
.amos-button-bar-group-usetag {
  &.amos-button-bar-group {
    display: flex;
    align-items: center;

    .amos-btn {
      padding: 0 12px;
      margin: 0 4px;
      line-height: 32px;
      background: white;
      border: 0;
      border-radius: 4px;

      &[data-status='checked'] {
        color: #3f79ff;
        background: #e6f7ff;
      }
    }
  }
}