@use 'variables' as *;
@use '@syncfusion/ej2-buttons/styles/button/variables' as btn;

@include export-module('split-button-bigger') {
  .e-bigger .e-split-btn-wrapper,
  .e-bigger.e-split-btn-wrapper {
    @if $skin-name == 'Material3' {
      border-radius: $split-bgr-btn-border-radius;
      box-shadow: btn.$btn-box-shadow;
    }
    .e-split-btn {
      @if $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
        border-radius: $split-bgr-btn-border-radius;
        box-shadow: none;
        padding: $split-wrapper-split-btn-padding;
      }
      @if $skin-name == 'bootstrap4'or $skin-name == 'FluentUI' {
        padding: 7px 4px;
        padding-left: $split-btn-icon-btn-padding-bigger;
        padding-right: $split-btn-icon-btn-padding-bigger;
      }
      @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
        padding-left: $split-btn-bigger-padding-left;
        padding-right: $split-btn-bigger-padding-right;
        line-height: 1.781em;
      }
      @else {
        padding-left: $split-btn-bigger-padding-left;
        padding-right: $split-btn-bigger-padding-right;
      }

      &.e-top-icon-btn {
        padding-bottom: $split-btn-top-icon-padding-bottom;
        padding-top: $split-btn-top-icon-padding-top;
      }

      .e-btn-icon {
        font-size: $drop-dbtn-icon-font-size-bigger;
        margin-left: $drop-down-bigger-btn-icon-margin-left;
        padding-right: $drop-down-bigger-btn-icon-padding-right;
        width: $split-auto-width;
        @if $skin-name == 'Material3' {
          border-radius: $split-bgr-btn-border-radius;
        }
      }

      .e-icon-top {
        padding-bottom: $drop-down-bigger-icon-top-padding-bottom;
        padding-right: $drop-down-zero-padding-margin;
      }

      &.e-icon-btn {
        padding-left: $split-btn-icon-btn-padding-bigger;
        padding-right: $split-btn-icon-btn-padding-bigger;

        .e-btn-icon {
          padding-right: $drop-down-zero-padding-margin;
        }
      }
    }

    .e-dropdown-btn {
      @if $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
        padding: $split-wrapper-split-btn-padding;
      }
      @else {
        padding-left: $drop-dbtn-bigger-padding-left;
        padding-right: $drop-dbtn-bigger-padding-right;
      }
      @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
        z-index: 1;
      }
    }

    &.e-rtl {
      .e-split-btn {
        @if $skin-name == 'bootstrap4' {
          padding-left: $split-btn-icon-btn-padding-bigger;
          padding-right: $split-btn-icon-btn-padding-bigger;
        }
        @else {
          padding-left: $drop-down-bigger-rtl-padding-left;
          padding-right: $drop-down-bigger-rtl-padding-right;
        }

        .e-btn-icon {
          padding-left: $drop-down-bgr-rtl-icon-padding-left;
          padding-right: $drop-down-zero-padding-margin;
          @if $skin-name == 'Material3' {
            border-radius: $split-bgr-btn-border-radius;
          }
        }

        .e-icon-top {
          padding-left: $drop-down-zero-padding-margin;
        }

        &.e-icon-btn {
          padding-left: $split-btn-icon-btn-padding-bigger;
          padding-right: $split-btn-icon-btn-padding-bigger;

          .e-btn-icon {
            padding-left: $drop-down-zero-padding-margin;
          }
        }
      }
    }

    &.e-vertical {
      .e-split-btn {
        @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
          padding-bottom: $split-btn-icon-btn-padding-bigger;
          padding-right: $split-btn-icon-btn-padding-bigger;
        }
        @else {
          padding-bottom: $split-btn-bgr-vertical-padding-bottom;
          padding-right: $split-btn-bgr-vertical-padding-right;
        }
      }

      .e-dropdown-btn {
        @if $skin-name == 'bootstrap4' {
          padding-bottom: $split-btn-icon-btn-padding-bigger;
          padding-top: $split-btn-icon-btn-padding-bigger;
        }
        @else {
          padding-bottom: $drop-down-btn-bgr-vertical-padding-bottom;
          padding-top: $drop-down-btn-bgr-vertical-padding-top;
        }
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          z-index: 1;
        }

        .e-icon-bottom {
          padding-top: $drop-down-zero-padding-margin;
        }
      }
    }
  }
}