.fk-d-menu-modal {
  z-index: z("modal", "content");

  &__grip {
    position: absolute;
    top: 2.5px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-medium);
    height: 5px;
    width: 15vw;
    max-width: 100px;
    border-radius: 10px;
  }

  .d-modal__body {
    padding: 1em 0;
  }

  h3 {
    padding-top: 0.25em;
  }

  .dropdown-menu {
    li a:focus-visible {
      outline: 0;
    }

    &__item {
      .btn {
        border-radius: 0; // overruling the general border-radius var on all btns
        // all specific overrules to make sure touch devices dont show focus states, which we apply on opening of the menu
        &:focus-visible,
        &:active {
          .discourse-touch & {
            background: transparent;
            color: var(--primary);

            .d-icon {
              color: inherit;
            }

            &.btn-danger {
              background: transparent;
              color: var(--danger);

              .d-icon {
                color: var(--danger-hover);
              }
            }
          }
        }
      }
    }

    li > .btn,
    li > a {
      padding: 0.75em 1rem;
    }
  }
}
