@import '../../base/fluent.scss';
@import '../../popups/popup/fluent.scss';
@import '../../buttons/button/fluent.scss';
@import '../../splitbuttons/drop-down-button/fluent.scss';
$split-btn-zindex: 2 !default;
$split-btn-border-radius: 0 !default;
$split-btn-focus-outline-offset: -3px !default;
$split-btn-vertical-secondary-icon-line-height: .334em !default;
$split-btn-seperator-border: 1px solid !default;
$split-btn-sec-btn-margin-left: -1px !default;
$split-btn-icon-btn-padding: 8px !default;
$split-btn-icon-btn-padding-bigger: 12px !default;
$split-btn-focus-border-color: $secondary-border-color !default;
$split-btn-focus-vertical-border-color: $secondary-border-color !default;
$split-btn-seperator-border-color: $secondary-border-color !default;
$split-btn-seperator-default-border-color: $secondary-border-color !default;
$split-btn-seperator-vertical-border-color: $secondary-border-color !default;
$split-btn-hover-border-color: $secondary-border-color !default;
$split-btn-hover-vertical-border-color: $secondary-border-color !default;
$split-btn-active-border-color: $secondary-bg-color-pressed !default;
$split-btn-active-vertical-border-color: $secondary-bg-color-pressed !default;
$split-btn-disabled-vertical-border-color: $secondary-border-color-disabled !default;
$split-btn-active-box-shadow: $shadow-none !default;
$split-btn-disabled-left-border-color: $secondary-border-color !default;
$split-btn-hover-left-border-color: $secondary-border-color !default;
$split-btn-focus-left-border-color: $secondary-border-color !default;
$split-btn-active-left-border-color: $secondary-border-color !default;

@include export-module('split-button-layout') {
  .e-split-btn-wrapper {
    display: inline-flex;
    white-space: nowrap;
    width: min-content;
    @if $skin-name == 'Material3' {
      border-radius: 4px;
      box-shadow: $btn-box-shadow;
    }

    .e-split-btn {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
      text-transform: none;
      z-index: 1;
      @if $skin-name == 'bootstrap4' {
        padding-left: $split-btn-icon-btn-padding;
        padding-right: $split-btn-icon-btn-padding;
      }
      @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
        padding-left: 12px;
        padding-right: 12px;
      }
      @else if $skin-name == 'FluentUI' {
        padding: 3px 7px;
      }
      @if $skin-name == 'Material3' {
        box-shadow: none;
      }
      @else {
        padding-left: 10px;
        padding-right: 10px;
      }

      &:focus {
        outline-offset: $split-btn-focus-outline-offset;
      }

      &:hover {
        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
          box-shadow: none;
        }
      }

      &:focus {
        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          box-shadow: $split-btn-active-box-shadow;
          z-index: $split-btn-zindex;
        }
        @else {
          box-shadow: none;
        }
      }

      &:focus-visible { // only for keybord
        @if $skin-name == 'Material3' {
          box-shadow: $btn-keyboard-focus-box-shadow;
        }
      }

      &.e-btn:focus-visible { // only for keybord
        @if $skin-name == 'fluent2' {
          border-right-color: $grey-black !important; /* stylelint-disable-line declaration-no-important */
          box-shadow: $btn-keyboard-focus-box-shadow;
        }
      }

      &:active {
        box-shadow: $split-btn-active-box-shadow;
        z-index: $split-btn-zindex;
      }

      &.e-top-icon-btn {
        padding-bottom: 10px;
        padding-top: 10px;
      }

      .e-btn-icon {
        font-size: $drop-down-btn-icon-font-size;
        margin-left: 0;
        @if $skin-name == 'FluentUI' {
          padding-right: 4px;
        }
        @else {
          padding-right: 8px;
        }
        width: auto;
        @if $skin-name == 'Material3' {
          border-radius: $btn-border-radius;
        }
      }

      .e-icon-top {
        padding-bottom: 4px;
        padding-right: 0;
      }

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

        .e-btn-icon {
          padding-right: 0;
        }
      }
    }

    .e-dropdown-btn {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
      margin-left: $split-btn-sec-btn-margin-left;
      @if $skin-name == 'Material3' {
        box-shadow: none;
      }
      @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
        padding-left: $split-btn-icon-btn-padding;
        padding-right: $split-btn-icon-btn-padding;
      }
      @else if $skin-name == 'FluentUI' {
        padding: 4px;
      }
      @else {
        padding-left: 4px;
        padding-right: 4px;
      }
      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
        z-index: 1;
      }

      &:focus,
      &:hover {
        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' and $theme-name != 'Material3' {
          box-shadow: none;
        }
      }

      &:active {
        box-shadow: $split-btn-active-box-shadow;
        z-index: $split-btn-zindex;
      }

      &:disabled {
        &:focus,
        &:hover,
        &:active {
          z-index: 0;
        }
      }

      &:focus {
        outline-offset: $split-btn-focus-outline-offset;
      }

      &.e-btn:focus-visible { // only for keybord
        @if $skin-name == 'fluent2' {
          margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
          box-shadow: $btn-keyboard-focus-box-shadow;
        }
      }
    }

    .e-btn {
      @if $skin-name != 'bootstrap4' and $skin-name != 'tailwind3' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI' and $theme-name != 'fluent2' and $theme-name != 'Material3' {
        box-shadow: none;
      }

      &:hover {
        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI' and $theme-name != 'fluent2' {
          box-shadow: none;
        }
      }

      &:focus {
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          box-shadow: $split-btn-active-box-shadow;
          z-index: $split-btn-zindex;
        }
        @else {
          box-shadow: none;
        }
      }

      &:focus-visible { // only for keybord
        @if $skin-name == 'Material3' {
          box-shadow: $btn-keyboard-focus-box-shadow;
        }
      }

      &:active {
        box-shadow: $split-btn-active-box-shadow;
        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          z-index: $split-btn-zindex;
        }
      }

      &:disabled {
        box-shadow: none;
        @if $skin-name == 'FluentUI' or $theme-name == 'FluentUI' {
          outline: 0;
          outline-offset: 0;
        }
      }

      &.e-inherit {
        &:focus,
        &:active {
          box-shadow: none;
        }
      }
    }

    &.e-rtl {
      .e-split-btn {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: $split-btn-border-radius;
        border-top-left-radius: 0;
        border-top-right-radius: $split-btn-border-radius;
        margin-left: $split-btn-sec-btn-margin-left;
        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
          padding-left: $split-btn-icon-btn-padding;
          padding-right: $split-btn-icon-btn-padding;
        }
        @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          padding-left: 12px;
          padding-right: 12px;
        }
        @if $skin-name == 'Material3' {
          border-radius: 4px;
        }
        @else {
          padding-left: 4px;
          padding-right: 10px;
        }

        .e-btn-icon {
          margin-right: 0;
          @if $skin-name == 'FluentUI' {
            padding-left: 4px;
          }
          @else {
            padding-left: 8px;
          }
          padding-right: 0;
          @if $skin-name == 'Material3' {
            border-radius: $btn-border-radius;
          }
        }

        .e-icon-top {
          padding-left: 0;
        }

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

          .e-btn-icon {
            padding-left: 0;
          }
        }
      }

      .e-dropdown-btn {
        border-bottom-left-radius: $split-btn-border-radius;
        border-bottom-right-radius: 0;
        border-top-left-radius: $split-btn-border-radius;
        border-top-right-radius: 0;
        margin-left: 0;
        @if $skin-name == 'Material3' {
          border-radius: 4px;
          box-shadow: none;
        }
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          z-index: 1;
        }
      }
    }

    &.e-vertical {
      display: inline-block;

      .e-split-btn,
      .e-dropdown-btn {
        display: block;
        width: 100%;
      }

      .e-split-btn {
        border-bottom-left-radius: 0;
        border-top-right-radius: $split-btn-border-radius;
        line-height: 1;
        @if $skin-name == 'bootstrap4'or $skin-name == 'tailwind' {
          padding-bottom: $split-btn-icon-btn-padding;
          padding-right: $split-btn-icon-btn-padding;
        }
        @if $skin-name == 'Material3' {
          border-radius: 4px;
          box-shadow: none;
        }
        @else {
          padding-bottom: 4px;
          padding-right: 10px;
        }

        .e-icon-top {
          padding-bottom: 4px;
        }
      }

      .e-dropdown-btn {
        border-bottom-left-radius: $split-btn-border-radius;
        border-top-right-radius: 0;
        line-height: $split-btn-vertical-secondary-icon-line-height;
        margin-left: 0;
        margin-top: $split-btn-sec-btn-margin-left;
        @if $skin-name == 'bootstrap4' {
          padding-bottom: $split-btn-icon-btn-padding;
          padding-top: $split-btn-icon-btn-padding;
        }
        @if $skin-name == 'Material3' {
          border-radius: 4px;
          box-shadow: none;
        }
        @else {
          padding-bottom: 4px;
          padding-top: 4px;
        }

        .e-icon-bottom {
          padding-top: 0;
        }
      }

      &.e-rtl {
        .e-split-btn {
          border-bottom-right-radius: 0;
          border-top-left-radius: $split-btn-border-radius;
          margin-left: 0;
        }

        .e-dropdown-btn {
          border-bottom-right-radius: $split-btn-border-radius;
          border-top-left-radius: 0;
        }
      }
    }
  }
}


@include export-module('split-button-theme') {
  .e-split-btn-wrapper {
    .e-split-btn {
      @if $skin-name == 'Material3' {
        border-image: $split-btn-seperator-border-color;
        border-width: 0 1px 0 0;
      }
      @else {
        @if $skin-name != 'tailwind3' {
          border-right-color: $split-btn-seperator-border-color;
        }
      }

      &:focus {
        border-right-color: $split-btn-focus-border-color;
      }

      &:active {
        border-right-color: $split-btn-active-border-color;
      }

      &:disabled {
        border-right-color: $btn-disabled-bgcolor;
        @if $skin-name == 'tailwind3' {
          border-right-color: $btn-disabled-border-color;
        }
      }

      &.e-inherit {
        border-color: transparent;
      }
    }

    &.e-splitbtn-disabled {
      @if $skin-name == 'Material3' {
        box-shadow: none;
      }
    }

    &:hover :not(e-active) {
      & .e-split-btn {
        border-right-color: $split-btn-hover-border-color;

        &:disabled {
          border-right-color: $btn-disabled-border-color;
        }
      }
    }

    &.e-rtl {
      .e-split-btn {
        @if $skin-name == 'material' or $skin-name == 'fabric' {
          border-color: transparent;
        }
        @else if $skin-name == 'Material3' {
          border-image: $split-btn-seperator-border-color-rtl;
          border-width: 0 0 0 1px;
        }
        @else {
          border-left-color: $split-btn-seperator-border-color;
          border-right-color: $split-btn-seperator-default-border-color;
        }

        &:focus {
          @if $skin-name == 'material' or $skin-name == 'fabric' {
            border-color: transparent;
          }
          @else {
            border-left-color: $split-btn-focus-border-color;
            border-right-color: $split-btn-focus-vertical-border-color;
          }
        }

        &:active {
          @if $skin-name == 'material' or $skin-name == 'fabric' {
            border-color: transparent;
          }
          @else {
            border-left-color: $split-btn-active-border-color;
            border-right-color: $split-btn-active-vertical-border-color;
          }
        }

        &:disabled {
          border-left-color: $btn-disabled-border-color;
          border-right-color: $split-btn-disabled-vertical-border-color;
        }

        &.e-inherit {
          border-color: transparent;
        }
      }

      &:hover {
        & .e-split-btn :not(e-active) {
          border-left-color: $split-btn-hover-border-color;
          border-right-color: $split-btn-hover-vertical-border-color;

          &:disabled {
            border-left-color: $btn-disabled-border-color;
          }
        }
      }
    }

    &.e-vertical {
      .e-split-btn {
        @if $skin-name == 'Material3' {
          border-image: $split-btn-seperator-border-color-vertical;
          border-width: 0 0 2px;
        }
        border-bottom-color: $split-btn-seperator-vertical-border-color;
        border-right-color: $split-btn-seperator-default-border-color;

        &.e-inherit,
        &.e-inherit:focus,
        &.e-inherit:active,
        &.e-inherit:disabled {
          border-color: transparent;
        }

        &:focus {
          border-bottom-color: $split-btn-focus-border-color;
          border-right-color: $split-btn-focus-vertical-border-color;
        }

        &:active {
          border-bottom-color: $split-btn-active-border-color;
          border-right-color: $split-btn-active-vertical-border-color;
        }

        &:disabled {
          border-bottom-color: $btn-disabled-border-color;
          border-right-color: $split-btn-disabled-vertical-border-color;
        }
      }

      &:hover {
        & .e-split-btn {
          border-bottom-color: $split-btn-hover-border-color;
          border-right-color: $split-btn-hover-vertical-border-color;

          &.e-inherit,
          &.e-inherit:disabled {
            border-color: transparent;
          }

          &:disabled {
            border-bottom-color: $btn-disabled-border-color;
          }
        }
      }

      &.e-rtl {
        .e-split-btn {
          border-left-color: $split-btn-seperator-default-border-color;

          &.e-inherit,
          &.e-inherit:focus,
          &.e-inherit:active,
          &.e-inherit:disabled {
            border-color: transparent;
          }

          &:focus {
            border-left-color: $split-btn-focus-left-border-color;
          }

          &:active {
            border-left-color: $split-btn-active-left-border-color;
          }

          &:disabled {
            border-left-color: $split-btn-disabled-left-border-color;
          }
        }

        &:hover {
          & .e-split-btn {
            border-left-color: $split-btn-hover-left-border-color;

            &.e-inherit {
              border-color: transparent;
            }
          }
        }
      }
    }
  }
}

@include export-module('split-button-bigger') {
  .e-bigger .e-split-btn-wrapper,
  .e-bigger.e-split-btn-wrapper {
    @if $skin-name == 'Material3' {
      border-radius: 4px;
      box-shadow: $btn-box-shadow;
    }
    .e-split-btn {
      @if $skin-name == 'Material3' {
        border-radius: 4px;
        box-shadow: none;
      }
      @if $skin-name == 'bootstrap4'or $skin-name == 'FluentUI' {
        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: 16px;
        padding-right: 16px;
      }
      @else {
        padding-left: 12px;
        padding-right: 6px;
      }

      &.e-top-icon-btn {
        padding-bottom: 12px;
        padding-top: 12px;
      }

      .e-btn-icon {
        font-size: $drop-down-btn-icon-font-size-bigger;
        margin-left: 0;
        @if $skin-name == 'FluentUI' {
          padding-right: 8px;
        }
        @else {
          padding-right: 10px;
        }
        width: auto;
        @if $skin-name == 'Material3' {
          border-radius: 4px;
        }
      }

      .e-icon-top {
        padding-bottom: 6px;
        padding-right: 0;
      }

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

        .e-btn-icon {
          padding-right: 0;
        }
      }
    }

    .e-dropdown-btn {
      @if $skin-name == 'bootstrap4' {
        padding-left: 10px;
        padding-right: 10px;
      }
      @else {
        padding-left: 4px;
        padding-right: 4px;
      }
      @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 if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          padding-left: 12px;
          padding-right: 12px;
        }
        @else {
          padding-left: 6px;
          padding-right: 12px;
        }

        .e-btn-icon {
          @if $skin-name == 'FluentUI' {
            padding-left: 8px;
          }
          @else {
            padding-left: 10px;
          }
          padding-right: 0;
          @if $skin-name == 'Material3' {
            border-radius: 4px;
          }
        }

        .e-icon-top {
          padding-left: 0;
        }

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

          .e-btn-icon {
            padding-left: 0;
          }
        }
      }
    }

    &.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: 6px;
          padding-right: 12px;
        }
      }

      .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: 4px;
          padding-top: 4px;
        }
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          z-index: 1;
        }

        .e-icon-bottom {
          padding-top: 0;
        }
      }
    }
  }
}