//
// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2017
// @license     : MIT

.ui-button-group {
  > .ui-button {
    @include flex(0 0 auto);
    margin       : 0;
    border-radius: 0;
  }

  &.ui-fill > .ui-button {
    @include flex(1 1 auto);
    text-align: center;
    max-width : none;
  }

  &.ui-toggle > .ui-button {
    color       : $button-default-text;
    background  : $button-default-bg;
    border-color: rgba(shade($button-default-bg, 85%),.5);
  }

  &.ui-disabled > .ui-button {
    border-color  : shade($button-disabled-bg,90%) !important;
    box-shadow    : none !important;
    pointer-events: none !important;

    &:after {
      content      : ' ';
      border-radius: inherit;
      background   : rgba($button-disabled-bg, .5);
      @include position(absolute, 0);
    }
  }

  &.ui-horizontal {
    @include flex-row($display:inline-flex, $align: stretch);
  }

  &.ui-vertical {
    @include flex-column($display:inline-flex, $align: stretch);

    > .ui-button {
      &:first-child {
        border-top-left-radius : $base-border-radius;
        border-top-right-radius: $base-border-radius;
      }

      &:last-child {
        border-bottom-left-radius : $base-border-radius;
        border-bottom-right-radius: $base-border-radius;
      }
    }
  }
}

.ui-button {
  color        : $dark;
  max-width    : 12em;
  line-height  : 1.5;
  font-size    : 1em;
  text-shadow  : -1px -1px 0 rgba(0, 0, 0, .1);
  border-radius: $base-border-radius;
  border       : 1px solid $base-border-color;
  position     : relative;
  cursor       : pointer;
  display      : inline-block;
  padding      : 0.2em 1em;
  @include transition(padding .5s);

  span,
  strong {
    line-height   : 1.25;
    pointer-events: none;
  }

  &.ui-disabled,
  &[disabled] {
    box-shadow    : none !important;
    pointer-events: none !important;

    &:before {
      content   : ' ';
      background: rgba($button-disabled-bg, .75);
      box-shadow: 0 0 0 1px rgba($button-disabled-bg, .5);
      @include position(absolute, 0);
    }
  }

  &.ui-busy {
    box-shadow    : none !important;
    pointer-events: none !important;
    border-color  : rgba(darken($button-disabled-bg,10%),.75) !important;

    .ui-indicator {
      z-index    : 2;
      line-height: 1;
      font-size  : 1.2em;
      text-shadow: none;
      @include margin(start, -.5em);

      .ui-icon {
        margin: 0;
      }
    }

    &:after {
      content      : ' ';
      z-index      : 0;
      border-radius: inherit;
      background   : rgba($white, .25);
      @include position(absolute, 0);
    }
  }

  .ui-btn-icon {
    pointer-events: none;
    font-size     : 1.25em;
    margin        : 0 0.25em;
  }

  .ui-icon.ui-caret {
    opacity    : 0.5;
    line-height: 1.5em;
    font-size  : 0.5em;
    margin     : 0 0.2rem;
  }

  &.ui-square {
    padding: 0.2em;

    &.ui-busy .ui-indicator {
      margin: 0;
    }
  }

  &.ui-round {
    border-radius: 1em;
  }

  &.ui-big {
    font-size: 1.3em;
  }

  &.ui-small {
    font-size  : 0.7em;
    font-weight: 600;
    text-shadow: none;

    .ui-caret {
      margin: 0;
    }

    &.ui-busy .ui-indicator {
      margin: 0;
    }
  }

  &.ui-icon-top {
    text-align: center;

    .ui-label {
      display: block;
    }

    &.ui-round {
      border-radius: 2em;
    }
  }

  &.ui-open {
    &.ui-tether-top {
      border-top-left-radius : 0;
      border-top-right-radius: 0;
    }

    &.ui-tether-bottom {
      border-bottom-left-radius : 0;
      border-bottom-right-radius: 0;
    }
  }

  .ui-label {
    @include ellipsis();
  }

  .ui-button-icon {
    background-position: left center;
    background-repeat  : no-repeat;
    background-size    : 1em 1em;
  }
}
@include button-theme(default, $button-default-bg, $button-default-text, $button-default-hover-bg, $button-default-hover-text, $button-default-active-bg, $button-default-active-text);
@include button-theme(light, $button-light-bg, $button-light-text, $button-light-hover-bg, $button-light-hover-text, $button-light-active-bg, $button-light-active-text);
@include button-theme(dark, $button-dark-bg, $button-dark-text, $button-dark-hover-bg, $button-dark-hover-text, $button-dark-active-bg, $button-dark-active-text);
@include button-theme(primary, $button-primary-bg, $button-primary-text, $button-primary-hover-bg, $button-primary-hover-text, $button-primary-active-bg, $button-primary-active-text);
@include button-theme(secondary, $button-secondary-bg, $button-secondary-text, $button-secondary-hover-bg, $button-secondary-hover-text, $button-secondary-active-bg, $button-secondary-active-text);
@include button-theme(info, $button-info-bg, $button-info-text, $button-info-hover-bg, $button-info-hover-text, $button-info-active-bg, $button-info-active-text);
@include button-theme(danger, $button-danger-bg, $button-danger-text, $button-danger-hover-bg, $button-danger-hover-text, $button-danger-active-bg, $button-danger-active-text);
@include button-theme(success, $button-success-bg, $button-success-text, $button-success-hover-bg, $button-success-hover-text, $button-success-active-bg, $button-success-active-text);
@include button-theme(warning, $button-warning-bg, $button-warning-text, $button-warning-hover-bg, $button-warning-hover-text, $button-warning-active-bg, $button-warning-active-text);