/* MenuButton */
.ui-menu-button {
  @apply relative inline-block;
}

/* ドロップダウンメニュー */
.ui-menu-button__menu {
  @apply absolute top-full left-0 z-10 mt-1 hidden min-w-full overflow-y-auto rounded-md border border-gray-200 bg-white py-1;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.08);
}

/* 右揃え。既定は left-0 で、発注フォーム等の他利用箇所はそのままにするため修飾クラスで上書きする。 */
.ui-menu-button__menu--right {
  @apply right-0 left-auto;
}

.ui-menu-button__menu--open {
  @apply block;
}

/* メニュー項目 */
.ui-menu-button__item {
  @apply block w-full cursor-pointer whitespace-nowrap px-3 py-2 text-left text-sm leading-5 font-normal text-gray-900;
}

.ui-menu-button__item:hover {
  @apply bg-gray-50;
}