// Set default customise component variables here,
// Override it in theme variables files


%btn-toolbar-actions {
  .btn-toolbar {
    padding-top: 1px;
    padding-bottom: 1px;
    &:not(:first-child) {
      @extend %ml-2;
    }
    > *:not(:last-child) {
      @extend %mr-2;
    }
    &,
    .btn-group {
      @extend .btn-group-xs;
    }

    .btn-group-lg,
    .btn-group-sm,
    .btn-group-xs {
      @extend %btn-group-border-radius-reset;
    }
  }
}

.x-toolbar-actions {
  @extend .d-flex,
          .justify-content-between,
          %py-2,
          %px-3,
          %bg-light,
          .flex-nowrap,
          %btn-toolbar-actions;

  .x-toolbar-input {
    @extend .x-input-group-icon,
            .flex-1;

    max-width: 30%;

    .form-control {
      @extend %form-control-sm;
    }
  }


  &.is-full {
    @extend %py-0;
  }

  &.x-toolbar-actions-50 {
    .x-toolbar-input {
      max-width: 50%;
    }
  }

  &.x-toolbar-actions-100 {
    .x-toolbar-input {
      @extend .mw-100;
    }
  }

  &.is-right {
    @extend .justify-content-end;
  }

  .x-toolbar-text {
    @extend .m-0,
            .px-1,
            .text-default,
            .align-self-center;
  }

  .x-toolbar-link {
    @extend .align-self-center,
            .ml-2,
            .mr-auto;
  }

  .badge {
    @extend .d-inline-flex,
            .align-items-center;
  }

  .x-switch:only-child {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

.x-toolbar-page {
  @extend .d-flex,
          .justify-content-between,
          %btn-toolbar-actions;
}