@import '../variables.less';
@import './variables.less';
@import '../mixins.less';

.buttons-group,
.buttons-tab {
  z-index: 10;
  .align-self(center);
  .flexbox();
  .flex-wrap(nowrap);
}

.buttons-group {
  margin: 1rem 0;
  .button {
    border-radius: 0 0 0 0;
    width: 100%;
    -webkit-box-flex:1;
    -ms-flex:1;
    .hairline(left, @color-primary-active);
    &.active {
      background-color: @color-primary-active;
      color: white;
      z-index: 100;
    }
    &:active {
    }
  }
  .button:first-child {
    border-radius: 0.25rem 0 0 0.25rem;
    .hairline-remove(left);
  }
  .button:last-child {
    border-radius: 0 0.25rem 0.25rem 0;
  }
  .button.button-round:first-child {
    border-radius: 1.35rem 0 0 1.35rem;
  }
  .button.button-round:last-child {
    border-radius: 0 1.35rem 1.35rem 0;
  }
}

.buttons-group.button-bordered {
  border-radius: .25rem;
  .hairline-border(@color-primary, .25rem);

  .button {
    position: relative;
    z-index: 1;
    &:before {
      background-color: @color-primary;
    }
    .hairline-border-remove();
    &.active,
    &:active {
      background-color: @color-primary;
      color: white;
    }
  }

  &.button-round {
    .hairline-border(@color-primary, @btn-height);
    .button {
      &:first-child {
        border-radius: @btn-height 0 0 @btn-height;
      }
      &:last-child {
        border-radius: 0 @btn-height @btn-height 0;
      }
    }
    &.button-small {
      .hairline-border(@color-primary, @btn-small-height);
      .button {
        &:first-child {
          border-radius: @btn-small-height 0 0 @btn-small-height;
        }
        &:last-child {
          border-radius: 0 @btn-small-height @btn-small-height 0;
        }
      }
    }
    &.button-large {
      .hairline-border(@color-primary, @btn-large-height);
      .button {
        &:first-child {
          border-radius: @btn-large-height 0 0 @btn-large-height;
        }
        &:last-child {
          border-radius: 0 @btn-large-height @btn-large-height 0;
        }
      }
    }
  }
}

.buttons-tab {
  background: white;
  position: relative;
  .hairline(bottom, #d0d0d0);
  .button {
    color: @color-text-secondary;
    font-size: 0.8rem;
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    -webkit-box-flex:1;
    -ms-flex:1;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background-color: transparent;

    &.active {
      color: @color-primary;
      border-color: @color-primary;
      background: transparent;
      z-index: 100;
    }
  }
}