%x-btn-icon,
.x-btn-icon {
  @extend %x-flex-a-center;

  &.x-btn-stack {
    @extend %mb-2;
    width: 100%;
  }

  .x-btn-icon-prepend {
    @extend %ml-n2,
            %my-n2;
  }

  .x-icon-container {
    &:first-child {
      @extend %mr-2;
    }
  }

  .x-btn-icon-content {
    @extend %ml-n4;
    width: 100%;
  }
}

%x-btn-icon-only,
.x-btn-icon-only {
  @extend %py-1,
          %px-2,
          %x-flex-center;


  .btn-group & {
    height: 100%;
  }


  &.btn-xs {
    @extend %p-1;
  }

  .x-icon-container {
    @extend %mx-1;
    line-height: 2;
    font-size: map_get($icon-sizes, sm);

    &.x-icon-md,
    .x-icon-md & {
      font-size: map_get($icon-sizes, md);
    }

    &:first-child {
      @extend .mr-0;
    }
    &:last-child {
      @extend .ml-0;
    }
  }
}

%x-btn-icon-action,
.x-btn-icon-action {
  @extend %x-btn-icon-only-md,
          %mx-2,
          %x-btn-default,
          %btn-sm;
          border-radius: $border-radius;
}

%x-btn-icon-only-sm,
.x-btn-icon-only-sm {
  @extend %btn,
          %x-btn-icon-only;

  .x-icon {
    @extend .x-icon-sm;
  }
}

%x-btn-icon-only-md,
.x-btn-icon-only-md {
  @extend %btn,
          %x-btn-icon-only;

  .x-icon {
    @extend .x-icon-md;
  }
}

%x-btn-icon-only-lg,
.x-btn-icon-only-lg {
  @extend %btn,
          %x-btn-icon-only;

  .x-icon {
    @extend .x-icon-lg;
  }
}


// Toggle icon button
.x-btn-aside-toggle {
  @include invisible(visible);
  @extend %btn,
          %x-btn-default,
          %px-2,
          %x-flex-center;
  right: calc( 0% - 1.875rem / 2 );
  top: calc( 50% - 1.875rem / 2 );
  z-index: $zindex-sticky;
  border-radius: 1rem !important;
  position: relative;

  @include x-hover-focus-active() {
    background-color: rgba(var(--custom-theme-primary-rgb, theme-color('primary-transparent')), 0.2) !important;
  }
}