.menu__container {
  position: relative;

  .menu__wrapper {
    background: var(--pure-white);
    border: 1px solid var(--light-gray);
    border-radius: var(--border-radius);
    bottom: 0;
    box-shadow: var(--gray-box-shadow);
    display: flex;
    flex-direction: column;
    gap: 0;
    height: fit-content;
    left: 0;
    max-width: var(--container-sm);
    min-width: fit-content;
    opacity: 0;
    padding: 1rem 0.5rem;
    position: absolute;
    transform: translate(-50%, calc(100% + 0.5rem));
    transition: 0.4s ease-in-out;
    visibility: hidden;
    width: 100%;
    z-index: 90;

    &[open] {
      opacity: 1;
      visibility: visible;
    }

    /* MODIFIER I: DIRECTION - Default is in the middle */
    &.menu__wrapper--right {
      left: unset;
      right: 0;
      transform: translate(0, calc(100% + 0.5rem));
    }

    &.menu__wrapper--left {
      left: 0;
      right: unset;
      transform: translate(0, calc(100% + 0.5rem));
    }

    &.menu__wrapper--inline-right {
      left: unset;
      right: 100%;
      transform: translate(-0.5rem, -0.5rem);
      top: 0;
      padding: 0.25rem 0;
    }

    &.menu__wrapper--inline-left {
      left: 0;
      right: unset;
      transform: translate(0, calc(100% + 0.5rem));
      top: 0;
      padding: 0.25rem 0;
    }

    /* MODIFIER II: SIZE - Default sizing will hug content */
    &.menu__wrapper--sm {
      max-width: var(--container-xs);
      min-width: var(--container-xs);
    }

    &.menu__wrapper--md {
      max-width: var(--container-sm);
      min-width: var(--container-sm);
    }

    /* MODIFIER III: FEATURES */
    &.menu__wrapper--scroll {
      overflow-x: hidden;
      overflow-y: scroll;
      padding: 1rem 0 1rem 0.5rem;
    }

    /*************************/
    hr { /* Can be used as a divider */
      background: var(--ink-gray); /* For browsers that do not support gradients */
      background: -webkit-linear-gradient(90deg, transparent 0%, var(--ink-gray) 25%, var(--ink-gray) 75%, transparent 100%); /*For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(90deg, transparent 0%, var(--ink-gray) 25%, var(--ink-gray) 75%, transparent 100%); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(90deg, transparent 0%, var(--ink-gray) 25%, var(--ink-gray) 75%, transparent 100%); /* For Firefox 3.6 to 15 */
      background: linear-gradient(90deg, transparent 0%, var(--ink-gray) 25%, var(--ink-gray) 75%, transparent 100%); /* Standard syntax */
      margin:0 0 0.5rem 0;
      min-height: 1px;
    }

    .menu__header {
      color: var(--ink-gray);
      margin-bottom: 0.25rem;
      white-space: nowrap;
    }

    .menu__section {
      &.menu__section--danger .menu__header {
        color: var(--danger-dark);
      }

      &:not(:last-child) {
        margin-bottom: 0.5rem;
      }
    }

    .menu__section--l {
      min-width: 250px;
    }

    menu {
      list-style: none;
      padding: 0;

      /* Only Menu tag scrolls */
      &.menu--scroll {
        overflow-x: hidden;
        overflow-y: scroll;

        &#queryable_menu_organisations {
          /* (Button height + gap) * show 5 buttons */
          max-height: calc((2rem + 0.5rem) * 5);
          min-height: 2rem;
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          margin-top: 1rem;
          margin-bottom: 1rem;
        }
      }
    }

    /* MENU LIST ITEM */
    .menu__list-item {
      --menu-item-color: var(--theme-color-darker);
      align-items: center;
      border-radius: 4px;
      cursor: pointer;
      display: inline-flex;
      flex-direction: row;
      gap: 0.5rem;
      justify-content: flex-start;
      text-align: left;
      max-width: var(--container-sm);
      transition: 0.4s ease-in-out;
      width: 100%;
      position: relative;
      padding: 0.5rem 1rem;
      white-space: nowrap;

      &.menu__list-item--sm {
        border-radius: 0;

        &:has(> form) button, &:not(&:has(> form)) > *:not(tooltip) {
          font-size: 0.875rem;
        }
      }

      &.menu__list-item--lg {
        padding: 1rem;
      }

      /* Menu actions that are wrapped with a form */
      &:has(> form) form {
        width: 100%;
      }

      /* All Menu action types */
      &:has(> form) button, &:not(&:has(> form)) > *:not(tooltip) {

        &:not(.card) {
          align-items: center;
        }

        display: inline-flex;
        font-size: 1rem;
        gap: 0.5rem;
        line-height: 1.5rem;
        padding-block: 0;
        padding-inline: 0;
        text-align: left;
        white-space: nowrap;
        width: 100%;

        &.truncate {
          display: -webkit-box;
          white-space: break-spaces;
        }

        &[disabled] {
          cursor: not-allowed;
          opacity: 0.5;
        }
      }

      &:has(tooltip) {
        tooltip {
          font-size: 0.875rem;
          height: fit-content;
          width: inherit;

          &:is([position="top"]) {
            inset-block-end: calc(100% + var(--_arrow-size) + 4px);
          }

          &:is([position="bottom"]) {
            inset-block-start: calc(100% + var(--_arrow-size) + 4px);
          }
        }
      }

      &.menu__list-item--no-cursor {
        cursor: none;
      }

      &.menu__list-item--notice {
        --menu-item-color: var(--blue-darker);
      }

      &.menu__list-item--success {
        --menu-item-color: var(--success-dark);
      }

      &.menu__list-item--alert {
        --menu-item-color: var(--yellow-darker);
      }

      &.menu__list-item--warning {
        --menu-item-color: var(--warning-dark);
      }

      &.menu__list-item--danger {
        --menu-item-color: var(--danger-dark);
      }

      &:hover {
        background-color: color-mix(in srgb, var(--menu-item-color), white 90%);

        .icon {
          fill: var(--menu-item-color);
          transition: 0.4s ease-in-out;
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    .menu__wrapper {
      max-width: 100%;
      width: 100%;
      min-width: var(--container-s);

      .menu__list-item {
        &:has(> form) button, &:not(&:has(> form)) > * {
          white-space: normal;
        }
      }
    }
  }
}