@use '../../internals/Box/styles/index' as box;
@use '../../styles/mixins/menu' as menu;
@use '../../styles/mixins/utilities' as utils;

//
// Menu
// --------------------------------------------------

.rs-menu {
  --rs-menu-divider-color: var(--rs-divider-border);
  --rs-menu-shadow: var(--rs-shadow-md);
  --rs-menu-padding: calc(var(--rs-spacing) * 1.5);
  --rs-menu-font-size: var(--rs-font-size-sm);
  --rs-menuitem-padding-inline: calc(var(--rs-spacing) * 3);
  --rs-menuitem-padding-block: calc(var(--rs-spacing) * 2);
  --rs-menuitem-divider-margin-block: calc(var(--rs-spacing) * 1.5);
  --rs-menuitem-spacing: calc(var(--rs-spacing) * 2);

  margin: 0; // override default ul
  list-style: none;
  font-size: var(--rs-menu-font-size);
  text-align: start;
  background-color: var(--rs-bg-overlay);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-menu-padding);
  outline: 0;
}

// Links within the menu menu
.rs-menu-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);
  color: var(--rs-text-primary);
  border-radius: var(--rs-radius-sm);
  cursor: pointer;
  @include utils.reset-link-text-decoration(none);

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

  .rs-menu-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
  //
  // Gray out text and ensure the hover/focus state remains gray
  &[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
    }
  }
}

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