@import '../../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {

  .toolbars-container {
    display: flex;
    flex-direction: column;
  }

  .pagination-container {
    @include nb-ltr(margin-right, 1rem);
    @include nb-rtl(margin-left, 1rem);

    .btn-group > .btn {
      padding-left: 1.125rem;
      padding-right: 1.125rem;
    }
  }

  .icon-toolbar-container {
    .btn-group > .btn {
      padding-left: 1.125rem;
      padding-right: 1.125rem;
    }
  }

  .toggle-types {
    .btn-toggle-radio-group {
      margin-bottom: 1rem;
    }
  }

  .divided-button-group {
    .btn-divided-checkbox-group {
      margin-bottom: 1rem;
      flex-wrap: wrap;
    }
  }

  .example-container:not(:last-child) {
    margin-bottom: 1.5rem;
  }

  .example-container > div {
    &:not(:last-child) {
      margin-bottom: 1rem;
    }
  }

  .example-container > .btn-divided-checkbox-group {
    flex-wrap: wrap;

    > label {
      flex-basis: 10%;
      @include nb-ltr(margin, 0 0.25rem 0.5rem 0);
      @include nb-rtl(margin, 0 0 0.5rem 0.25rem);
    }
  }

  @include media-breakpoint-down(sm) {
    .btn {
      padding: 0.75rem 0.7rem;
    }
  }
}