@use 'sass:map';
@use '../../internals/Box/styles/index' as box;
@use '../../styles/mixins/utilities' as utils;
@use '../../styles/mixins/color-modes' as color-modes;
@use '../../styles/mixins/menu' as menu;
@use '../../Button/styles/index' as button;
@use './mixin' as *;
@use './variables' as *;

// The dropdown wrapper (div)
.rs-dropdown {
  position: relative;
  display: inline-block;
  vertical-align: middle; // Make sure dropdown vertical alignment with button,button group and so on.

  &[data-disabled='true'] &-toggle.rs-btn {
    cursor: var(--rs-cursor-disabled) !important;
    box-shadow: none;

    &.rs-btn[data-appearance='subtle'] {
      &,
      &:focus,
      &:active {
        color: var(--rs-btn-subtle-disabled-text);
        background: none;
      }
    }

    &.rs-btn[data-appearance='primary'] {
      &,
      &:focus,
      &:active {
        opacity: 0.3;
        background-color: var(--rs-btn-primary-bg);
      }
    }

    &.rs-btn[data-appearance='link'] {
      &,
      &:focus,
      &:active {
        opacity: 0.3;
        text-decoration: none;
      }
    }

    &.rs-btn[data-appearance='ghost'] {
      &,
      &:focus,
      &:active {
        opacity: 0.3;
      }
    }

    .rs-ripple-pond {
      display: none !important;
    }
  }
}

// Dropdown Toggle
.rs-dropdown-toggle {
  &,
  &.rs-btn {
    // Force set style even if has `.btn`.
    @include dropdown-toggle;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--rs-spacing) * 1.5);
  }

  &.rs-dropdown-toggle-no-caret {
    padding-inline-end: var(--rs-padding-inline-md);
  }
}

// The dropdown menu (ul)
.rs-dropdown-menu {
  margin: 0; // override default ul
  list-style: none;
  font-size: var(--rs-font-size-sm);
  text-align: start; // Ensures proper alignment if parent has it changed (e.g., modal footer)
  background-color: var(--rs-bg-overlay);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-menu-padding);
  outline: 0;

  &:focus-visible {
    @include utils.focus-ring();
  }

  .rs-dropdown & {
    position: absolute;
    // dropdown-menu zindex value is greater than dropdown-toggle
    z-index: calc(var(--rs-zindex-dropdown) + 1);
    float: inline-start;
    box-shadow: var(--rs-dropdown-shadow);
    outline: none;

    @include color-modes.high-contrast-mode {
      border: 1px solid var(--rs-border-secondary);
    }
  }

  &[hidden] {
    display: none;
  }
}

// Links within the dropdown menu
.rs-dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--rs-menuitem-spacing);
  padding-inline: var(--rs-menuitem-padding-inline);
  padding-block: var(--rs-menuitem-padding-block);
  clear: both;
  font-weight: normal;
  line-height: var(--rs-line-height-md);
  color: var(--rs-text-primary);
  border-radius: var(--rs-radius-sm);
  white-space: nowrap; // prevent links from randomly breaking onto new lines
  cursor: pointer; //fixed link has not [href] style
  text-decoration: none;

  &:focus,
  &:hover {
    text-decoration: none;
  }

  &-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .rs-dropdown-item-shortcut {
    border: none;
    line-height: var(--rs-text-line-height-xs);
  }

  > .rs-icon {
    width: var(--rs-font-size-base);
    text-align: center;
  }

  &[data-active='true'] {
    outline: 0;
    font-weight: bold;

    &,
    &:hover,
    &:focus {
      color: var(--rs-menuitem-text-active);
      background-color: var(--rs-menuitem-bg-active);

      .rs-text {
        color: var(--rs-menuitem-text-active);
      }
    }
  }

  // Hover/Focus state
  &:focus-visible,
  &[data-focus='true'] {
    @include menu.menuitem-active;
  }

  &:focus {
    outline: 0;
  }

  // Disabled state
  &[data-disabled='true'] {
    color: var(--rs-text-disabled);
    cursor: var(--rs-cursor-disabled);

    .rs-text {
      color: var(--rs-text-disabled);
    }

    // Nuke hover/focus effects
    &:hover,
    &:focus {
      text-decoration: none;
      background-color: transparent;
      background-image: none; // Remove CSS gradient
    }
  }
}

// Divider
.rs-dropdown-item-divider {
  height: 1px;
  margin-block: var(--rs-menuitem-divider-margin-block);
  overflow: hidden;
  background-color: var(--rs-dropdown-divider-color);
}

// The dropdown submenu
.rs-dropdown-item-submenu {
  position: relative;

  &:hover > .rs-dropdown-item-toggle {
    @include menu.menuitem-active;
  }

  &.rs-dropdown-item {
    position: relative;

    > .rs-dropdown-item-toggle {
      .rs-dropdown-menu-toggle-icon {
        position: absolute;
        top: 11px;
        margin: 0;
      }
    }

    > .rs-dropdown-menu {
      position: absolute;
      top: 0;
    }
  }

  // Set submenu icon
  &.rs-dropdown-item {
    padding: 0;

    .rs-dropdown-item-toggle {
      padding-inline-end: 26px;
    }

    .rs-dropdown-menu-toggle-icon {
      inset-inline-end: var(--rs-dropdown-caret-icon-padding-horizontal);
    }
  }

  .rs-dropdown-menu {
    inset-inline-start: 100%;

    &[data-direction='start'] {
      inset-inline-start: unset;
      inset-inline-end: 100%;
    }
  }

  // Open
  &[data-open='true'] > .rs-dropdown-menu {
    //use display table to fix-content
    display: table;
    animation-name: slideUpIn;
    animation-play-state: running;
  }
}

// Active state
.rs-dropdown-menu > .rs-dropdown-menu-item[data-focus='true'] {
  outline: 0;
  background-color: var(--rs-menuitem-bg-active);

  &:hover,
  &:focus {
    @include menu.menuitem-active;
  }
}

// Open state for the dropdown
.rs-dropdown:where([data-open='true']) {
  > .rs-dropdown-menu {
    animation-play-state: running;
  }

  // Remove the outline when :focus is triggered
  > a {
    outline: 0;
  }

  // Vertical placements
  @mixin placement-vertical($position, $value) {
    &[data-placement='#{$position}-start'],
    &[data-placement='#{$position}-end'] {
      > .rs-dropdown-menu {
        #{$value}: 100%;
      }
    }
  }

  // Horizontal alignments
  @mixin placement-align($start, $end, $value) {
    &[data-placement='#{$start}'],
    &[data-placement='#{$end}'] {
      > .rs-dropdown-menu {
        #{$value}: 0;
      }
    }
  }

  // Apply placements
  @include placement-vertical(top, bottom);
  @include placement-vertical(bottom, top);
  @include placement-vertical(left, inset-inline-end);
  @include placement-vertical(right, inset-inline-start);

  // Apply alignments
  @include placement-align(top-start, bottom-start, inset-inline-start);
  @include placement-align(top-end, bottom-end, inset-inline-end);
  @include placement-align(left-start, right-start, top);
  @include placement-align(left-end, right-end, bottom);
}

// Dropdown section headers
.rs-dropdown-header {
  display: block;
  padding: var(--rs-dropdown-item-padding-y) var(--rs-dropdown-item-padding-x);
  line-height: var(--rs-line-height-md);
  color: var(--rs-dropdown-header-text);
  border-bottom: 1px solid var(--rs-dropdown-divider-color);
  white-space: nowrap; // as with > li > a
  margin-bottom: 2px;
}

// Opacity not working in Safari,so remove .
@keyframes slideUpIn {
  0% {
    transform-origin: 0% 0%;
    transform: scaleY(0.8);
  }

  100% {
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
}