/**
 * @license
 * Copyright Akveo. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@use '../../theme/styles/theming' as *;
@use 'status-buttons';

@mixin btn-group-primary-separator() {
  @include nb-theme(color-primary-600);
}

@mixin btn-group-success-separator() {
  @include nb-theme(color-success-600);
}

@mixin btn-group-warning-separator() {
  @include nb-theme(color-warning-600);
}

@mixin btn-group-info-separator() {
  @include nb-theme(color-info-600);
}

@mixin btn-group-danger-separator() {
  @include nb-theme(color-danger-600);
}

@mixin btn-group-secondary-separator() {
  @include nb-theme(color-primary-600);
}

@mixin dropdown-separator($color) {
  border-left: 1px solid $color;
}

@mixin dropdown-primary-separator() {
  @include dropdown-separator(nb-theme(button-filled-primary-active-background-color));
}

@mixin dropdown-success-separator() {
  @include dropdown-separator(nb-theme(button-filled-success-active-background-color));
}

@mixin dropdown-warning-separator() {
  @include dropdown-separator(nb-theme(button-filled-warning-active-background-color));
}

@mixin dropdown-info-separator() {
  @include dropdown-separator(nb-theme(button-filled-info-active-background-color));
}

@mixin dropdown-danger-separator() {
  @include dropdown-separator(nb-theme(button-filled-danger-active-background-color));
}

@mixin dropdown-secondary-separator() {
  @include dropdown-separator(nb-theme(button-filled-primary-active-background-color));
}

@mixin nb-b-button-group-theme() {
  .btn-group:not(.btn-divided-group) > .btn + .btn {
    &.btn-primary {
      @include dropdown-primary-separator();
    }

    &.btn-success {
      @include dropdown-success-separator();
    }

    &.btn-warning {
      @include dropdown-warning-separator();
    }

    &.btn-info {
      @include dropdown-info-separator();
    }

    &.btn-danger {
      @include dropdown-danger-separator();
    }

    &.btn-secondary {
      @include dropdown-secondary-separator();
    }
  }

  @each $status in nb-get-core-statuses() {
    .btn-group:not(.btn-divided-group) {
      .btn.btn-outline-#{$status}.active {
        background-color: nb-theme(button-filled-#{$status}-active-background-color);
        border-color: nb-theme(button-filled-#{$status}-active-border-color);
        color: nb-theme(button-filled-#{$status}-text-color);
      }

      .btn.btn-outline-#{$status}:hover,
      .btn.btn-outline-#{$status}.hover {
        background-color: nb-theme(button-filled-#{$status}-hover-background-color);
        border-color: nb-theme(button-filled-#{$status}-hover-border-color);
        color: nb-theme(button-filled-#{$status}-text-color);
      }
    }
  }

  .btn-group:not(.btn-divided-group) > .btn:not(.dropdown-toggle) {
    &:first-child {
      @include nb-ltr() {
        border-top-left-radius: nb-theme(button-rectangle-border-radius);
        border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      @include nb-rtl() {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: nb-theme(button-rectangle-border-radius);
        border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
      }
    }
    &:last-child {
      @include nb-ltr() {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: nb-theme(button-rectangle-border-radius);
        border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
      }
      @include nb-rtl() {
        border-top-left-radius: nb-theme(button-rectangle-border-radius);
        border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }

  .btn-group.dropdown {
    & > .btn:first-of-type.dropdown-toggle {
      @include nb-ltr() {
        border-top-left-radius: nb-theme(button-rectangle-border-radius);
        border-top-right-radius: 0;
      }
      @include nb-rtl() {
        border-top-left-radius: 0;
        border-top-right-radius: nb-theme(button-rectangle-border-radius);
      }
    }
    & > .btn:last-of-type.dropdown-toggle {
      @include nb-ltr() {
        border-top-left-radius: 0;
        border-top-right-radius: nb-theme(button-rectangle-border-radius);
      }
      @include nb-rtl() {
        border-top-left-radius: nb-theme(button-rectangle-border-radius);
        border-top-right-radius: 0;
      }
    }

    &:not(.show) {
      & > .btn:first-of-type.dropdown-toggle {
        @include nb-ltr() {
          border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
          border-bottom-right-radius: 0;
        }
        @include nb-rtl() {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
        }
      }
      & > .btn:last-of-type.dropdown-toggle {
        @include nb-ltr() {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
        }
        @include nb-rtl() {
          border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
          border-bottom-right-radius: 0;
        }
      }
    }

    &.show > .btn.dropdown-toggle {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .btn-group.dropup {
    & > .btn:first-of-type.dropdown-toggle {
      @include nb-ltr() {
        border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
        border-bottom-right-radius: 0;
      }
      @include nb-rtl() {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
      }
    }
    & > .btn:last-of-type.dropdown-toggle {
      @include nb-ltr() {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
      }
      @include nb-rtl() {
        border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
        border-bottom-right-radius: 0;
      }
    }

    &:not(.show) {
      & > .btn:first-of-type.dropdown-toggle {
        @include nb-ltr() {
          border-top-left-radius: nb-theme(button-rectangle-border-radius);
          border-top-right-radius: 0;
        }
        @include nb-rtl() {
          border-top-left-radius: 0;
          border-top-right-radius: nb-theme(button-rectangle-border-radius);
        }
      }
      & > .btn:last-of-type.dropdown-toggle {
        @include nb-ltr() {
          border-top-left-radius: 0;
          border-top-right-radius: nb-theme(button-rectangle-border-radius);
        }
        @include nb-rtl() {
          border-top-left-radius: nb-theme(button-rectangle-border-radius);
          border-top-right-radius: 0;
        }
      }
    }

    &.show > .btn.dropdown-toggle {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
  }

  .btn-group-icon {
    font-size: 1.5rem;
    padding: 0 1rem;
  }

  .btn-divided-group {
    @each $status in nb-get-core-statuses() {
      .btn-#{$status} {
        background-color: nb-theme(button-filled-#{$status}-background-color);
        border-color: nb-theme(button-filled-#{$status}-border-color);
        color: nb-theme(button-filled-#{$status}-text-color);
      }
      .btn-outline-#{$status} {
        background-color: nb-theme(button-outline-#{$status}-background-color);
        border-color: nb-theme(button-outline-#{$status}-border-color);
        color: nb-theme(button-outline-#{$status}-text-color);
      }

      .btn:active,
      .btn.active {
        &.btn-#{$status},
        &.btn-outline-#{$status} {
          background-color: nb-theme(button-filled-#{$status}-active-background-color);
          border-color: nb-theme(button-filled-#{$status}-active-border-color);
          color: nb-theme(button-filled-#{$status}-text-color);
        }
      }

      .btn:hover,
      .btn.hover {
        &.btn-#{$status},
        &.btn-outline-#{$status} {
          background-color: nb-theme(button-filled-#{$status}-hover-background-color);
          border-color: nb-theme(button-filled-#{$status}-hover-border-color);
          color: nb-theme(button-filled-#{$status}-text-color);
        }
      }
    }

    .btn:active,
    .btn.active {
      &.btn-secondary,
      &.btn-outline-secondary {
        background-color: nb-theme(button-filled-primary-active-background-color);
      }
    }

    .btn:hover,
    .btn.hover {
      &.btn-secondary,
      &.btn-outline-secondary {
        background-color: nb-theme(button-filled-primary-hover-background-color);
      }
    }
  }

  .btn-outline-toggle-group {
    .btn {
      background-color: transparent;
    }

    .btn:not(.active):not(:hover) + .btn:not(.active):not(:hover) {
      &::before {
        background-color: nb-theme(divider-color);
      }
    }
  }

  .btn-divided-group {
    .btn:not(:first-child) {
      @include nb-ltr(margin-left, 0.5rem);
      @include nb-rtl(margin-right, 0.5rem);
      border-radius: nb-theme(button-rectangle-border-radius);
    }

    .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
      border-radius: nb-theme(button-rectangle-border-radius);
    }

    .btn:not(:last-child):not(.dropdown-toggle) {
      border-radius: nb-theme(button-rectangle-border-radius);
    }
  }

  .btn-outline-divided-group {
    .btn {
      background-color: transparent;
    }
  }

  .btn-group-full-width {
    width: 100%;

    .btn:not(.btn-fixed) {
      width: 100%;
    }
  }
}