@use 'sass:color';

$drop-down-btn-arrow-content: '\e70d' !default;
$drop-down-btn-vertical-btn-padding: 6px 12px !default;
$drop-down-btn-vertical-bigger-padding: 8px 16px !default;
$drop-down-btn-bigger-font-size: $text-base !default;
$drop-down-btn-bigger-li-height: 40px !default;
$drop-down-btn-bigger-small-li-height: 32px !default;
$drop-down-btn-bigger-max-width: 202px !default;
$drop-down-btn-bigger-min-width: 112px !default;
$drop-down-btn-icon-font-size: $text-sm !default;
$drop-down-btn-small-icon-font-size: $text-xs !default;
$drop-down-btn-icon-margin-right: 11px !default;
$drop-down-btn-bigger-icon-margin-right: 12px !default;
$drop-down-btn-li-border-width: 1px !default;
$drop-down-btn-li-height: 32px !default;
$drop-down-btn-small-li-height: 24px !default;
$drop-down-btn-li-padding: 0 12px !default;
$drop-down-btn-bigger-li-padding: 0 16px !default;
$drop-down-btn-small-li-padding: 0 8px !default;
$drop-down-btn-max-width: 178px !default;
$drop-down-btn-menu-icon-bigger-font-size: 16px !default;
$drop-down-btn-menu-icon-font-size: $text-sm !default;
$drop-down-btn-min-width: 120px !default;
$drop-down-btn-seperator-padding: 3px 0 !default;
$drop-down-btn-sub-ul-box-shadow: none !default;
$drop-down-btn-ul-border-radius: $radius-4 !default;
$drop-down-btn-ul-padding: 4px 0 !default;
$drop-down-btn-ul-bigger-padding: 8px 0 !default;
$drop-down-btn-ul-small-padding: 4px 0 !default;
$drop-down-btn-caret-icon-font-size: $text-sm !default;
$drop-down-btn-icon-font-size-bigger: $text-base !default;
$drop-down-btn-small-icon-font-size-bigger: $text-base !default;
$drop-down-btn-caret-icon-font-size-bigger: $text-base !default;
$drop-down-btn-box-shadow: $secondary-shadow-focus !default;
$drop-down-btn-popup-margin-top: 2px !default;
$drop-down-btn-bigger-popup-margin-top: 4px !default;
$drop-down-btn-ul-border: 1px solid $border-light !default;
$drop-down-btn-li-box-shadow: $shadow-focus-ring2 !default;
$drop-down-btn-li-border-style: solid !default;
$drop-down-btn-color: $content-text-color !default;
$drop-down-btn-disable-text: $secondary-text-color-disabled !default;
$drop-down-btn-font-size: $text-sm !default;
$drop-down-btn-small-font-size: $text-xs !default;
$drop-down-btn-font-weight: $font-weight-normal !default;
$drop-down-btn-li-bgcolor: $flyout-bg-color-hover !default;
$drop-down-btn-ul-bgcolor: $flyout-bg-color !default;
$drop-down-btn-li-border-color: $border-light !default;
$drop-down-btn-selected-color: $flyout-text-color-selected !default;
$drop-down-btn-parent-ul-box-shadow: $shadow-lg !default;
$drop-down-btn-li-focus-bgcolor: $flyout-bg-color-hover !default;
$drop-down-btn-li-selection-bgcolor: $flyout-bg-color-selected !default;
$drop-down-btn-li-selection-font-color: $content-text-color !default;
$drop-down-btn-menu-icon-color: $icon-color !default;
$drop-down-btn-menu-icon-disabled-color: $secondary-text-color-disabled !default;
$drop-down-btn-li-hover-bgcolor: $flyout-bg-color-hover !default;

$drop-down-btn-line-height: 1 !default;
$dd-btn-zero-margin-padding: 0 !default;
$dd-menu-height: 1px !default;
$dd-menu-icon-width: 1em !default;
$dd-menu-width: 1px !default;
$dd-auto-height: auto !default;
$dd-bgr-seperator-line-height: normal !default;
$dd-full-width: 100% !default;

@include export-module('drop-down-button-layout') {
  .e-dropdown-btn,
  .e-dropdown-btn.e-btn {
    @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'fluent2' and $skin-name != 'tailwind3' {
      box-shadow: none;
    }
    text-transform: none;
    white-space: normal;
    @if $skin-name == 'Material3' {
      border-radius: $btn-border-radius;
      box-shadow: $drop-down-btn-box-shadow;
      line-height: $drop-down-btn-line-height;
    }

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

    &:focus {
      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
        box-shadow: $drop-down-btn-box-shadow;
      }
      @else {
        @if $skin-name != 'tailwind3' {
          box-shadow: none;
        }
      }
    }

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

    &:active {
      box-shadow: $btn-active-box-shadow;
    }

    .e-btn-icon {
      font-size: $drop-down-btn-icon-font-size;
    }

    .e-caret {
      font-size: $drop-down-btn-caret-icon-font-size;
      @if $skin-name == 'FluentUI' or $skin-name == 'highcontrast' {
        margin-top: 0;
      }
    }

    &.e-vertical {
      line-height: $drop-down-btn-line-height;
      padding: $drop-down-btn-vertical-btn-padding;
    }

    &.e-caret-hide {
      & .e-caret {
        display: none;
      }
    }

    &.e-small {
      .e-dropdown-popup ul {
        padding: $drop-down-btn-ul-small-padding;

        & .e-item  {
          padding: $drop-down-btn-small-li-padding;
          @if $skin-name == 'Material3' {
            height: $drop-down-btn-small-li-height;
          }
        }
      }

      &.e-vertical {
        line-height: $drop-down-btn-line-height;
        padding: $drop-down-btn-vertical-btn-padding;
      }

      & .e-btn-icon {
        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'Material3' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
          font-size: $drop-down-btn-small-icon-font-size;
        }
      }

      & .e-btn-icon.e-caret {
        @if $skin-name == 'fluent2' {
          font-size: $drop-down-btn-icon-caret-font-size;
        }
        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
          font-size: $drop-down-btn-small-caret-icon-font-size;
        }
      }
    }
  }

  .e-small.e-dropdown-popup ul {
    & .e-item {
      @if $skin-name == 'tailwind3' {
        height: $drop-down-btn-small-li-height;
        font-size: $drop-down-btn-small-font-size;
        line-height: $drop-down-btn-small-li-height;
        .e-menu-icon {
          font-size: $drop-down-btn-small-icon-font-size;
          line-height: $drop-down-btn-small-li-height;
        }
      }
    }
  }

  .e-dropdown-popup {
    position: absolute;
    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $theme-name == 'tailwind-dark' or $theme-name == 'bootstrap5-dark' {
      border-radius: $drop-down-btn-ul-border-radius;
      margin-top: $drop-down-btn-popup-margin-top;
    }
    @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
      border-radius: $drop-down-btn-ul-border-radius;
    }

    & ul {
      border: $drop-down-btn-ul-border;
      border-radius: $drop-down-btn-ul-border-radius;
      box-shadow: $drop-down-btn-parent-ul-box-shadow;
      box-sizing: border-box;
      font-size: $drop-down-btn-font-size;
      font-weight: $drop-down-btn-font-weight;
      list-style-image: none;
      list-style-position: outside;
      list-style-type: none;
      margin: $dd-btn-zero-margin-padding;
      min-width: $drop-down-btn-min-width;
      overflow: hidden;
      padding: $drop-down-btn-ul-padding;
      user-select: none;
      white-space: nowrap;

      & .e-item  {
        cursor: pointer;
        display: flex;
        height: $drop-down-btn-li-height;
        line-height: $drop-down-btn-li-height;
        padding: $drop-down-btn-li-padding;
        @if $skin-name == 'fluent2' {
          line-height: $dropdown-btn-item-flu-line-height;
          margin: $dropdown-btn-item-flu-margin;
          border-radius: $dropdown-btn-item-flu-border-radius;
        }

        &.e-separator {
          padding: $dd-btn-zero-margin-padding !important; /* stylelint-disable-line declaration-no-important */
        }

        &.e-url {
          padding: $dd-btn-zero-margin-padding;
        }

        & .e-menu-url {
          display: block;
          padding: $drop-down-btn-li-padding;
          text-decoration: none;
          width: $dd-full-width;
        }

        & .e-menu-icon {
          float: left;
          font-size: $drop-down-btn-menu-icon-font-size;
          @if $skin-name == 'fluent2' {
            line-height: $dd-btn-menu-icon-line-height;
            padding: $dd-btn-menu-icon-padding;
          }
          @else {
            line-height: $drop-down-btn-li-height;
          }
          margin-right: $drop-down-btn-icon-margin-right;
          vertical-align: middle;
          width: $dd-menu-icon-width;
        }

        &.e-disabled {
          cursor: auto;
          pointer-events: none;
          @if $skin-name == 'Material3' {
            box-shadow: $drop-down-btn-sub-ul-box-shadow;
          }
          @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
            color: $flyout-text-color-disabled;
            opacity: 1;

            & .e-menu-icon {
              color: $flyout-text-color-disabled;
            }
          }
        }

        &.e-separator {
          border-bottom-style: $drop-down-btn-li-border-style;
          border-bottom-width: $drop-down-btn-li-border-width;
          cursor: auto;
          height: $dd-auto-height;
          line-height: $dd-bgr-seperator-line-height;
          margin: $drop-down-btn-seperator-padding;
          pointer-events: none;
        }
      }
    }

    &.e-transparent {
      background: transparent;
      box-shadow: none;

      & .e-dropdown-menu {
        border: 0;
        height: $dd-menu-height;
        min-width: $dd-btn-zero-margin-padding;
        padding: $dd-btn-zero-margin-padding;
        width: $dd-menu-width;
      }
    }

    &.e-hidden {
      display: none !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-rtl.e-dropdown-popup .e-item {
    & .e-menu-icon {
      float: right;
      margin-left: $drop-down-btn-icon-margin-right;
      margin-right: $dd-btn-zero-margin-padding;
    }
  }

  .e-dropdown-popup-width ul {
    min-width: $dd-btn-zero-margin-padding !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-dropdown-popup-width ul li {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block !important; /* stylelint-disable-line declaration-no-important */
  }
}

@include export-module('drop-down-button-theme') {
  .e-dropdown-popup {
    background: $drop-down-btn-ul-bgcolor;
    color: $drop-down-btn-color;

    & ul {
      & .e-item  {
        & .e-menu-url {
          color: $drop-down-btn-color;
        }

        & .e-menu-icon {
          color: $drop-down-btn-menu-icon-color;
        }

        &.e-focused {
          @if $skin-name != 'FluentUI' {
            background: $drop-down-btn-li-focus-bgcolor;
          }
          box-shadow: $drop-down-btn-li-box-shadow;
        }

        &:hover {
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
            background: $drop-down-btn-li-hover-bgcolor;
          }
          @else {
            background: $drop-down-btn-li-bgcolor;
          }
          color: $drop-down-btn-li-selection-font-color;
          & .e-menu-icon,
          & .e-menu-url {
            @if $skin-name == 'fluent2' {
              color: $drop-down-btn-li-selection-font-color;
            }
          }
        }

        &:active,
        &.e-selected {
          background: $drop-down-btn-li-selection-bgcolor;
          color: $drop-down-btn-selected-color;

          & .e-menu-url {
            color: $drop-down-btn-selected-color;
          }

          & .e-menu-icon {
            @if $skin-name == 'FluentUI' or $theme-name == 'FluentUI' {
              color: $drop-down-btn-menu-icon-color;
            }
            @else {
              color: $drop-down-btn-selected-color;
            }
          }
        }

        &:focus {
          @if $skin-name == 'tailwind3' {
            background: $drop-down-btn-li-bgcolor;
            color: $drop-down-btn-li-selection-font-color;
          }
        }

        &:focus-visible {
          @if $theme-name == 'fluent2' {
            background-color: $flyout-bg-color-focus;
            box-shadow: $btn-keyboard-focus-box-shadow;
            color: $flyout-text-color-focus;

            & .e-menu-icon {
              color: $flyout-text-color-focus;
            }
          }
        }
      }

      & .e-separator {
        border-bottom-color: $drop-down-btn-li-border-color;
      }
    }
  }

  .e-dropdown-btn,
  .e-dropdown-btn.e-btn {
    &.e-inherit {
      background: inherit;
      border-color: transparent;
      box-shadow: none;
      color: inherit;

      &:hover,
      &:focus,
      &:active,
      &.e-active {
        background: rgba(transparent, .056);
        border-color: transparent;
        box-shadow: none;
        color: inherit;
      }
    }
  }
}

@include export-module('drop-down-button-tailwind3-icons') {
  .e-dropdown-btn,
  .e-dropdown-btn.e-btn {
    .e-caret {
      &::before {
        content: '\e729';
      }
    }
  }
}

@include export-module('drop-down-button-bigger') {
  .e-bigger .e-dropdown-btn,
  .e-bigger.e-dropdown-btn {
    .e-btn-icon {
      font-size: $drop-down-btn-icon-font-size-bigger;
    }

    .e-caret {
      font-size: $drop-down-btn-caret-icon-font-size-bigger;
    }

    &.e-vertical {
      line-height: $drop-down-btn-line-height;
      padding: $drop-down-btn-vertical-bigger-padding;
    }

    &.e-small {
      &.e-vertical {
        line-height: $drop-down-btn-line-height;
        padding: $drop-down-btn-vertical-bigger-padding;
      }
      .e-btn-icon {
        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'Material3' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
          font-size: $drop-down-btn-small-icon-font-size-bigger;
        }
      }
      .e-btn-icon.e-caret {
        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' or $skin-name == 'fluent2' {
          font-size: $drop-down-btn-small-caret-icon-font-size-bigger;
        }
      }
    }
  }

  .e-bigger .e-small.e-dropdown-popup ul,
  .e-bigger.e-small.e-dropdown-popup ul {
    & .e-item {
      @if $skin-name == 'tailwind3' {
        height: $drop-down-btn-bigger-small-li-height;
        font-size: $drop-down-btn-bigger-font-size;
        line-height: $drop-down-btn-bigger-small-li-height;
        .e-menu-icon {
          font-size: $drop-down-btn-icon-font-size-bigger;
          line-height: $drop-down-btn-bigger-small-li-height;
        }
      }
    }
  }

  #{if(&, '&', '*')}.e-bigger .e-dropdown-popup {
    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $theme-name == 'tailwind-dark' or $theme-name == 'bootstrap5-dark' {
      background-color: transparent;
      border-radius: $drop-down-btn-ul-border-radius;
    }
  }

  #{if(&, '&', '*')}.e-bigger .e-dropdown-popup ul,
  #{if(&, '&', '*')}.e-bigger.e-dropdown-popup ul {
    box-shadow: $drop-down-btn-parent-ul-box-shadow;
    font-size: $drop-down-btn-bigger-font-size;
    min-width: $drop-down-btn-bigger-min-width;
    padding: $drop-down-btn-ul-bigger-padding;
    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      background-color: $drop-down-btn-ul-bgcolor;
      margin-top: $drop-down-btn-bigger-popup-margin-top;
    }

    & .e-item  {
      height: $drop-down-btn-bigger-li-height;
      @if $skin-name != 'fluent2' {
        line-height: $drop-down-btn-bigger-li-height;
      }
      @if $skin-name == 'fluent2' {
        height: $drop-down-btn-item-height;
        line-height: $drop-down-btn-item-line-height;
      }
      padding: $drop-down-btn-bigger-li-padding;

      &.e-url {
        padding: $dd-btn-zero-margin-padding;
      }

      & .e-menu-url {
        @if $skin-name == 'fluent2' {
          padding: $drop-down-menu-url-padding;
        }
      }

      & .e-menu-icon {
        font-size: $drop-down-btn-menu-icon-bigger-font-size;
        line-height: $drop-down-btn-bigger-li-height;
        @if $skin-name == 'fluent2' {
          line-height: $dropdown-btn-line-height;
        }
      }

      &.e-separator {
        height: $dd-auto-height;
        line-height: $dd-bgr-seperator-line-height;
      }
    }
  }
}