/** @component button-group */

@include exports('md-button-group') {
  .#{$button-group__class} {
    display: flex;
    width: 100%;

    .#{$button__class} {
      @include button-color(
        $color: $button-group__color,
        $color-hover: $button-group__color,
        $color-active: $button-group-active__color,
        $color-disabled: $button-group-disabled__color,
        $bg: $button-group__background,
        $bg-active: $button-group-active__background,
        $bg-disabled: $button-group__background,
        $bg-hover: $button-group-hover__background
      );

      min-width: 0;
      padding: $button-group__padding;
      margin-left: 0;
      font-size: $button-group__font-size;
      line-height: $button-group__line-height;
      border: $button-group__border;
      border-radius: 0;

      &:first-child {
        @include border-left-radius($button-group__border-radius);
      }

      &:not(:first-child) {
        margin-left: -$button-group__border-size;
      }

      &:last-child {
        @include border-right-radius($button-group__border-radius);
      }

      &.#{$button__class}--icon-group {
        width: auto;
        padding: $button-group-icon__padding;

        .md-icon {
          fill: currentColor;
        }
      }
    }

    &.#{$button-group__class} {
      &--justified {
        .#{$button__class}:not(.#{$button__class}--icon-group) {
          flex-grow: 1;
          width: 0;
        }
      }

      &--pill {
        .#{$button__class} {
          &:first-of-type {
            @include border-left-radius($button-group__border-radius-pill);
          }

          &:last-of-type {
            @include border-right-radius($button-group__border-radius-pill);
          }

          width: auto;
          padding: $button-group-icon__padding;

          @include button-color(
            $box-shadow: 0 2px 4px 0 $black-4,
            $border: 1px solid,
            $border-color: $black-12,
            $border-color-css-var: --md-separator-primary,
            $color: $button-group__color,
            $color-css-var: --md-textColor-primary,
            $color-hover: $button-group__color,
            $color-hover-css-var: --md-textColor-primary,
            $color-active: $button-group__color,
            $color-active-css-var: --md-textColor-primary,
            $color-disabled: $button-group-disabled__color,
            $color-disabled-css-var: --md-textColor-disabled,
            $bg: $button-group__background,
            $bg-css-var: --md-background-primary,
            $bg-disabled: $button-group__background,
            $bg-disabled-css-var: --md-background-quaternary,
            $bg-hover: $md-theme-10,
            $bg-active: $md-theme-20,
          );

          &:focus {
            background: $md-theme-10
          }

          .md-icon {
            fill: currentColor;
          }
        }
      }

      &--dark {
        .#{$button__class} {
          @include button-color(
            $color: $button-group__color--dark,
            $color-hover: $button-group__color--dark,
            $color-active: $button-group-active__color--dark,
            $color-disabled: $button-group-disabled__color--dark,
            $bg: $button-group__background,
            $bg-active: $button-group-active__background--dark,
            $bg-disabled: $button-group__background,
            $bg-hover: $button-group-hover__background--dark
          );

          padding: $button-group__padding--dark;
          font-size: $button-group__font-size--dark;
          line-height: $button-group__line-height--dark;
          border: $button-group__border--dark;

          &.active {
            font-family: $brand-font-bold;
          }
        }
      }
    }
  }
}