@use 'ej2-base/styles/common/mixin' as *;

@mixin icon-left-right {
  @if $skin-name == 'bootstrap4' {
    padding: $btn-zero-padding $btn-bigger-icon-top-bottom-padding;
  }
  @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
    line-height: $btn-zero-line-height;
  }
}

@mixin mat3-border-radius {
  @if $skin-name == 'Material3' {
    border-radius: $btn-bgr-mat3-border-radius;
  }
}

@mixin top-bottom-icon-btn {
  line-height: $btn-top-bottom-icon-line-height;
}

@include export-module('button-bigger') {
  .e-bigger.e-small .e-btn,
  .e-bigger .e-small.e-btn,
  .e-bigger.e-small .e-css.e-btn,
  .e-bigger .e-small.e-css.e-btn {
    font-size: $btn-bigger-small-font-size;
    line-height: $btn-bigger-small-text-line-height;
    padding: $btn-bigger-small-padding;
    @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
      border-radius: $btn-bgr-tail-border-radius;
    }

    &.e-round-corner {
      @if $skin-name == 'Material3' {
        border-radius: $btn-bgr-mat3-round-border-radius;
        padding: $btn-bigger-small-padding;
      }
    }

    & .e-btn-icon {
      font-size: $btn-bigger-small-icon-font-size;
      width: $btn-icon-bigger-small-width;

      &.e-icon-left {
        margin-left: $btn-bigger-small-icon-margin;
        width: $btn-bigger-small-icon-width;
        @include icon-left-right;
      }

      &.e-icon-right {
        margin-right: $btn-bigger-small-icon-margin;
        width: $btn-bigger-small-icon-width;
        @include icon-left-right;
      }

      &.e-icon-top {
        padding-bottom: $btn-small-icon-top-bottom-padding;
        width: $btn-auto-width;
      }

      &.e-icon-bottom {
        padding-top: $btn-small-icon-top-bottom-padding;
        width: $btn-auto-width;
      }
    }

    &.e-icon-btn {
      padding: $btn-bigger-small-icon-padding;
      @if $skin-name == 'fluent2' {
        line-height: $btn-bgr-icon-line-height;
      }
      @include mat3-border-radius;
    }

    &.e-top-icon-btn,
    &.e-bottom-icon-btn {
      @include top-bottom-icon-btn;
      padding: $btn-top-icon-bigger-padding;
    }

    &.e-round {
      height: $btn-round-bigger-small-height;
      line-height: $btn-round-line-height;
      padding: $btn-zero-padding;
      width: $btn-round-bigger-small-width;

      & .e-btn-icon {
        font-size: $btn-bigger-small-round-font-size;
        line-height: $btn-bigger-small-round-icon-line-height;
        width: $btn-auto-width;
      }
    }

    &.e-rtl {
      & .e-icon-right {
        margin-left: $btn-bigger-small-icon-margin;
        margin-right: $btn-zero-padding;
      }

      & .e-icon-left {
        margin-left: $btn-zero-padding;
        margin-right: $btn-bigger-small-icon-margin;
      }
    }
  }

  .e-bigger .e-btn,
  .e-bigger.e-btn,
  .e-bigger .e-css.e-btn,
  .e-bigger.e-css.e-btn {
    font-size: $btn-bigger-font-size;
    line-height: $btn-bigger-text-line-height;
    padding: $btn-bigger-padding;
    @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
      border-radius: $btn-bgr-tail-border-radius;
    }
    @else if $skin-name == 'bootstrap5.3' {
      border-radius: $btn-bigger-border-radius;
    }

    &.e-round-corner {
      @if $skin-name == 'Material3' {
        border-radius: $btn-bgr-mat3-round-border-radius;
        padding: $btn-bigger-padding;
      }
    }

    & .e-btn-icon {
      font-size: $btn-bigger-icon-font-size;
      width: $btn-icon-bigger-width;

      &.e-icon-left {
        margin-left: $btn-bigger-icon-margin;
        width: $btn-bigger-icon-width;
        @include icon-left-right;
      }

      &.e-icon-right {
        margin-right: $btn-bigger-icon-margin;
        width: $btn-bigger-icon-width;
        @include icon-left-right;
      }

      &.e-icon-top {
        padding-bottom: $btn-bigger-icon-top-bottom-padding;
        width: $btn-auto-width;
      }

      &.e-icon-bottom {
        padding-top: $btn-bigger-icon-top-bottom-padding;
        width: $btn-auto-width;
      }
    }

    &.e-icon-btn {
      @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
        line-height: $btn-icon-bgr-line-height;
      }
      @if $skin-name == 'highcontrast' {
        padding: 3px 11px;
      }
      @include mat3-border-radius;
    }

    &.e-top-icon-btn,
    &.e-bottom-icon-btn {
      @include top-bottom-icon-btn;
      padding: $btn-top-icon-bigger-padding;
    }

    &.e-round {
      height: $btn-round-bigger-height;
      line-height: $btn-round-line-height;
      padding: $btn-zero-padding;
      width: $btn-round-bigger-width;
      @if $skin-name == 'tailwind' or $skin-name == 'Material3' or $skin-name == 'bootstrap5.3' {
        border-radius: $btn-round-border-radius;
      }

      & .e-btn-icon {
        font-size: $btn-bigger-round-font-size;
        line-height: $btn-bigger-round-icon-line-height;
        width: $btn-auto-width;
      }
    }

    &.e-rtl {
      & .e-icon-right {
        margin-left: $btn-bigger-icon-margin;
        margin-right: $btn-zero-padding;
      }

      & .e-icon-left {
        margin-left: $btn-zero-padding;
        margin-right: $btn-bigger-icon-margin;
      }
    }

    &.e-small {
      font-size: $btn-bigger-small-font-size;
      line-height: $btn-bigger-small-text-line-height;
      padding: $btn-bigger-small-padding;
      @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
        border-radius: 2px;
      }
      @else if $skin-name == 'bootstrap5.3' {
        border-radius: $btn-bigger-border-radius;
      }

      &.e-round-corner {
        @if $skin-name == 'Material3' {
          border-radius: $btn-bgr-mat3-round-border-radius;
          padding: $btn-bigger-small-padding;
        }
      }

      & .e-btn-icon {
        font-size: $btn-bigger-small-icon-font-size;
        width: $btn-icon-bigger-small-width;

        &.e-icon-left {
          margin-left: $btn-bigger-small-icon-margin;
          width: $btn-bigger-small-icon-width;
          @include icon-left-right;
        }

        &.e-icon-right {
          margin-right: $btn-bigger-small-icon-margin;
          width: $btn-bigger-small-icon-width;
          @include icon-left-right;
        }

        &.e-icon-top {
          padding-bottom: $btn-small-icon-top-bottom-padding;
          width: $btn-auto-width;
        }

        &.e-icon-bottom {
          padding-top: $btn-small-icon-top-bottom-padding;
          width: $btn-auto-width;
        }
      }

      &.e-icon-btn {
        padding: $btn-bigger-small-icon-padding;
        @include mat3-border-radius;
      }

      &.e-top-icon-btn,
      &.e-bottom-icon-btn {
        @include top-bottom-icon-btn;
        padding: $btn-top-icon-bigger-padding;
      }

      &.e-round {
        height: $btn-round-bigger-small-height;
        line-height: $btn-round-line-height;
        padding: $btn-zero-padding;
        width: $btn-round-bigger-small-width;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' {
          border-radius: $btn-round-border-radius;
        }

        & .e-btn-icon {
          font-size: $btn-bigger-small-round-font-size;
          line-height: $btn-bigger-small-round-icon-line-height;
          width: $btn-auto-width;
        }
      }

      &.e-rtl {
        & .e-icon-right {
          margin-left: $btn-bigger-small-icon-margin;
          margin-right: $btn-zero-padding;
        }

        & .e-icon-left {
          margin-left: $btn-zero-padding;
          margin-right: $btn-bigger-small-icon-margin;
        }
      }
    }
  }

  @if $skin-name == 'fluent2' {
    .e-bigger.e-small .e-btn.e-icon-btn .e-btn-icon,
    .e-bigger .e-btn.e-icon-btn .e-btn-icon {
      font-size: $btn-bgr-icon-font-size;
      line-height: $btn-bgr-icon-line-height;
    }
  }
}