@use 'global/common' as global;
@use 'global/mixins' as mixins;

/* ------------------------------
 ドロップダウンメニュー
------------------------------- */
// トグル
.js-acms-dropdown-toggle {
  position: relative;
  margin: 0;
  outline: 0;
}

// CSS変数
.acms-dropdown-menu-popover,
.js-acms-dropdown-menu,
.acms-dropdown-menu {
  --acms-dropdown-menu-min-width: 200px;
  --acms-dropdown-menu-item-padding: 4px;
  --acms-dropdown-menu-list-gap: 4px;
  --acms-dropdown-menu-padding-x: 8px;
  --acms-dropdown-menu-padding-y: 12px;
  --acms-dropdown-menu-box-shadow: #{global.$acms-shadow-elevation-middle};
}

// ポップオーバー
.acms-dropdown-menu-popover {
  @include global.popover(
    $padding-x: var(--acms-dropdown-menu-padding-x),
    $padding-y: var(--acms-dropdown-menu-padding-y),
    $min-width: var(--acms-dropdown-menu-min-width),
    $box-shadow: var(--acms-dropdown-menu-box-shadow)
  );
}

// メニュー
.js-acms-dropdown-menu:not(.acms-dropdown-menu-popover .js-acms-dropdown-menu),
.acms-dropdown-menu:not(.acms-dropdown-menu-popover .acms-dropdown-menu) {
  // ポップオーバーを使用しない場合（組み込みJSでの利用）
  display: none; // デフォルトでは非表示

  @include global.popover(
    $padding-x: var(--acms-dropdown-menu-padding-x),
    $padding-y: var(--acms-dropdown-menu-padding-y),
    $min-width: var(--acms-dropdown-menu-min-width),
    $box-shadow: var(--acms-dropdown-menu-box-shadow)
  );
}

// Elevation
.acms-dropdown-menu-popover,
.js-acms-dropdown-menu:not(.acms-dropdown-menu-popover .js-acms-dropdown-menu),
.acms-dropdown-menu:not(.acms-dropdown-menu-popover .acms-dropdown-menu) {
  &[data-elevation='1'] {
    --acms-dropdown-menu-box-shadow: #{global.$acms-shadow-elevation-low};
  }

  &[data-elevation='2'] {
    --acms-dropdown-menu-box-shadow: #{global.$acms-shadow-elevation-middle};
  }

  &[data-elevation='3'] {
    --acms-dropdown-menu-box-shadow: #{global.$acms-shadow-elevation-high};
  }
}

.js-acms-dropdown-menu,
.acms-dropdown-menu {
  line-height: 1.15;
  text-align: left;
  list-style: none;

  @include global.font-size(14);

  ul:not(.acms-dropdown-menu),
  ul:not(.js-acms-dropdown-menu) {
    padding: 0 8px;
    margin: 0;
    list-style: none;
  }

  // 右基点
  .acms-dropdown-right & {
    top: 5px;
    left: calc(100% + 5px);
  }

  .acms-nav .acms-dropdown-right & {
    left: 0;

    @include global.media-breakpoint-up(md) {
      left: calc(100% - 5px);
    }
  }

  // 下基点
  .acms-dropdown-bottom & {
    top: calc(100% + 10px);
    left: 0;
  }

  .acms-dropdown-current {
    background-color: global.$acms-color-info10;
  }

  .acms-dropdown-current-icon {
    position: absolute;
    top: 7px;
    right: 10px;
    display: block;
    width: 10px;
    height: 10px;
    background-color: global.$acms-color-info70;
    border-radius: 5px;
  }
}

/**
 * スクロールコンテナ
 */
.acms-dropdown-menu.acms-dropdown-menu-scrollable,
.acms-dropdown-menu-popover.acms-dropdown-menu-scrollable {
  max-height: calc(400px - 24px);
  overflow: scroll;
}

/**
 * メニュー
 */
.js-acms-dropdown-menu,
.acms-dropdown-menu,
ul.js-acms-dropdown-menu > li,
ul.acms-dropdown-menu > li,
.js-acms-dropdown-menu ul > li, // js-acms-dropdown-menu をulの親要素に付けたとき対応
.acms-dropdown-menu ul > li, // acms-dropdown-menu をulの親要素に付けたとき対応
.js-acms-dropdown-menu > [role='group'],
.acms-dropdown-menu > [role='group'] {
  $acms-dropdown-menu-icon-size: 16; // 本当はCSS変数で管理したいが、font-size mixin を使うためにはCSS変数を使えない

  > [role='menuitem'],
  > [role='menuitemcheckbox'],
  > [role='menuitemradio'],
  > a,
  > button {
    $self: &;

    position: relative;
    box-sizing: border-box;
    display: flex;
    gap: 4px;
    align-items: center;
    width: 100%;
    padding: var(--acms-dropdown-menu-item-padding);
    color: global.$acms-color-black;
    appearance: none;
    cursor: pointer;
    background: transparent;
    border: 0;
    transition: background 0.2s;

    &:link:not([aria-disabled='true']),
    &:visited:not([aria-disabled='true']) {
      color: global.$acms-color-black;
    }

    &:hover:not([aria-disabled='true']),
    &:active:not([aria-disabled='true']),
    &.acms-dropdown-menu-active:not([aria-disabled='true']) {
      background: global.$acms-color-gray20;
      border-radius: 3px;
    }

    &:focus-visible:not([aria-disabled='true']) {
      outline: none;
      border-radius: 3px;
      box-shadow: global.$acms-btn-focus-box-shadow;
    }

    &.acms-dropdown-menu-danger:not([aria-disabled='true']) {
      color: global.$acms-color-caution-text;

      &:active,
      &:hover {
        background: global.$acms-color-danger10;
      }

      .acms-dropdown-menu-item-command {
        color: global.$acms-color-caution-text;
      }
    }

    &[aria-disabled='true'] {
      color: global.$acms-color-system-gray40;
      pointer-events: none;
      cursor: default;

      .acms-dropdown-menu-item-command {
        color: global.$acms-color-system-gray40;
      }
    }

    & ~ [role='menuitem'],
    & ~ [role='menuitemcheckbox'],
    & ~ [role='menuitemradio'],
    & ~ a,
    & ~ button {
      margin-top: var(--acms-dropdown-menu-list-gap);
    }

    [class*='material-symbols'] {
      @include global.font-size($acms-dropdown-menu-icon-size);
    }

    &:has(.acms-dropdown-menu-checked, .acms-dropdown-menu-chevron) {
      padding-right: calc((var(--acms-dropdown-menu-item-padding) * 2) + #{$acms-dropdown-menu-icon-size}px);
    }

    .acms-dropdown-menu-checked,
    .acms-dropdown-menu-chevron {
      position: absolute;
      inset-inline-end: var(--acms-dropdown-menu-item-padding);
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

/**
 * グループ
 */
.js-acms-dropdown-menu > [role='group'] + *:not(.acms-divider),
.acms-dropdown-menu > [role='group'] + *:not(.acms-divider),
.js-acms-dropdown-menu > [role='group']:nth-child(n + 2),
.acms-dropdown-menu > [role='group']:nth-child(n + 2) {
  margin-top: 24px;
}

.js-acms-dropdown-menu .acms-divider + [role='group'],
.acms-dropdown-menu .acms-divider + [role='group'] {
  margin-top: 0;
}

.js-acms-dropdown-menu > [role='group'],
.acms-dropdown-menu > [role='group'] {
  .acms-dropdown-menu-group-title {
    display: block;
    padding: 0 4px 8px;
    margin-bottom: 4px;
    color: global.$acms-color-gray70;
    border-bottom: 0;

    @include global.font-size(12);
  }
}

/**
 * メニューのディバイダー
 */
.js-acms-dropdown-menu,
.acms-dropdown-menu,
.acms-dropdown-menu-popover {
  .acms-divider {
    height: 1px;
    padding: 0;
    margin: 12px 0;
    background-color: global.$acms-color-gray40;
    border: none;
  }

  [role='group'] + .acms-divider {
    margin: 24px 0;
  }
}

/**
 * コマンド
 */
.acms-dropdown-menu-item-command {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  line-height: 1;
  color: global.$acms-color-system-gray80;

  @include global.font-size(12);
}

.acms-dropdown-menu-item-command kbd {
  font-family: global.$acms-admin-font-family;
}

/**
 * サイズ
 */
.acms-dropdown-menu-popover.acms-dropdown-menu-sm,
.acms-dropdown-menu.acms-dropdown-menu-sm {
  --acms-dropdown-menu-min-width: 120px;
}

.acms-dropdown-menu-popover.acms-dropdown-menu-lg,
.acms-dropdown-menu.acms-dropdown-menu-lg {
  --acms-dropdown-menu-min-width: 280px;
}

@include global.media-breakpoint-down(md) {
  .acms-dropdown-toggle-sp .js-acms-dropdown-menu,
  .acms-dropdown-toggle-sp .acms-dropdown-menu {
    // モバイルではポップオーバーを使用しない（メニューバーのブログ選択ドロップダウンで利用）
    position: static !important;
    top: 0;
    left: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;

    li > *:not(.acms-divider),
    [role='menuitem'] {
      padding: 10px 20px;
    }
  }
}

// 下矢印
.acms-arrow-bottom {
  position: relative;
  top: 2px;
  display: inline-block;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: global.$acms-color-gray80;
}

.acms-arrow-right {
  display: inline-block;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: global.$acms-color-gray80;
}
