//
// Button groups
// --------------------------------------------------

.btn-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;

  > .btn {
    position: relative;
    float: left;

    &:hover,
    &:focus,
    &:active,
    &.active {
      z-index: 2;
    }
  }
}

.btn-group {
  .btn + .btn,
  .btn + .btn-group,
  .btn-group + .btn,
  .btn-group + .btn-group {
    margin-left: -2px;
  }

  .btn-group + .btn-group {
    margin-left: 2px;
    border-left-width: 0;
    border-right-width: 0;
  }

  & > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
  }

  & > .btn-group:not(:first-child):not(:last-child) > .btn {
    border-radius: 0;
  }

  & > .btn:first-child {
    margin-left: 0;

    &:not(:last-child):not(.dropdown-toggle) {
      @include border-right-radius(0);
    }
  }

  & > .btn:last-child:not(:first-child),
  & > .dropdown-toggle:not(:first-child) {
    @include border-left-radius(0);
  }

  & > .btn-group {
    float: left;
  }

  & > .btn-group:first-child:not(:last-child) {
    > .btn:last-child,
    > .dropdown-toggle {
      @include border-right-radius(0);
    }
  }

  & > .btn-group:last-child:not(:first-child) > .btn:first-child {
    @include border-left-radius(0);
  }

  & .dropdown-toggle:active,
  &.open .dropdown-toggle {
    outline: 0;
  }

  &.open .dropdown-toggle {
    @include box-shadow(none);

    &.btn-link {
      @include box-shadow(none);
    }
  }

  // Sizing
  // --------------------

  &-sm > .btn {
    @extend .btn-sm;
  }
  &-lg > .btn {
    @extend .btn-lg;
  }

  // Split button dropdowns
  // ----------------------

  // Give the line between buttons some depth
  & > .btn + .dropdown-toggle {
    padding-right: $grid-unit-y;
    padding-left: $grid-unit-y;
  }

  & > .btn-lg + .dropdown-toggle {
    padding-right: ceil($grid-unit-y * 1.5);
    padding-left: ceil($grid-unit-y * 1.5);
  }

  // Style Variations
  // --------------------

  &-switch {
    $height: $grid-unit-y * 5;

    height: $height;
    border-radius: $btn-border-radius-base;
    border: 1px solid rgba($brand-primary, 0.16);
    padding: 1px;

    @include themes-border(color-new-border);
    @include themes(background-color, btn-default-bg);

    > .btn {
      height: $height - ceil($grid-unit-y * 0.5);
      width: $height - ceil($grid-unit-y * 0.5);
      border-width: 0;
      padding: $btn-padding-y 0;
      background-color: transparent;
      border-radius: $btn-border-radius-base !important;
      line-height: $height - 4 - $btn-padding-y * 2;
      font-family: $font-family-proxima;

      @include themes(color, color-new-heading);

      &:not(.active) {
        &:hover,
        &:focus {
          @include themes(background-color, color-new-bg);
        }
      }

      &:not(:last-child) {
        margin-right: 1px;

        &:not(.active) {
          position: relative;

          &:before {
            content: "";
            display: block;
            position: absolute;
            top: $btn-padding-y + 2;
            bottom: $btn-padding-y + 2;
            right: -1px;
            width: 1px;

            @include themes(background-color, color-new-border);
          }
        }
      }

      &.active {
        background-color: $brand-primary;
        color: $color-white;
        font-family: $font-family-proxima-sbold;
        position: relative;

        @include box-shadow(0 -2px darken($brand-primary, 5%) inset);

        &:before {
          content: "";
          display: block;
          position: absolute;
          top: $btn-padding-y + 1;
          bottom: $btn-padding-y;
          left: -1px;
          width: 1px;

          @include themes(background-color, btn-default-bg);
        }
      }

      + .btn {
        margin-left: 0 !important;
      }
    }

    &-text {
      > .btn {
        width: auto;
        padding-left: $grid-unit-x * 2;
        padding-right: $grid-unit-x * 2;
      }
    }

    &-harmony {
      background-color: transparent;

      > .btn {
        &.active {
          background-color: $color-harmony-soft-indigo;
          color: $color-white;
          cursor: default;

          @include box-shadow(
            0 -2px darken($color-harmony-soft-indigo, 5%) inset
          );

          &.btn-switch-pink {
            background-color: $color-harmony-soft-pink;

            @include box-shadow(
              0 -2px darken($color-harmony-soft-pink, 5%) inset
            );
          }

          &.btn-switch-blue {
            background-color: $color-harmony-soft-blue;

            @include box-shadow(
              0 -2px darken($color-harmony-soft-blue, 5%) inset
            );
          }

          &.btn-switch-orange {
            background-color: $color-harmony-soft-orange;

            @include box-shadow(
              0 -2px darken($color-harmony-soft-orange, 5%) inset
            );
          }
        }
      }
    }

    &-no-borders {
      border-width: 0;

      @include box-shadow-themes(box-shadow-new);

      > .btn {
        height: $height - ceil($grid-unit-y * 0.5) + 2;
        line-height: $height - 2 - $btn-padding-y * 2;
      }
    }
  }

  // Justified button groups
  // ----------------------

  &-justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    > .btn,
    > .btn-group {
      display: table-cell;
      float: none;
      width: 1%;
    }
    > .btn-group .btn {
      width: 100%;
    }

    > .btn-group .dropdown-menu {
      left: auto;
    }
  }
}

.btn-toolbar {
  margin-left: -5px;

  @include clearfix;

  .btn,
  .btn-group,
  .input-group {
    float: left;
  }

  > .btn,
  > .btn-group,
  > .input-group {
    margin-left: 5px;
  }
}

[data-toggle="buttons"] {
  > .btn,
  > .btn-group > .btn {
    input[type="radio"],
    input[type="checkbox"] {
      position: absolute;
      clip: rect(0, 0, 0, 0);
      pointer-events: none;
    }
  }
}