discourse/app/assets/stylesheets/common/toolbar-popup-menu-options.scss

@use "lib/viewport";

.fk-d-menu[class*="toolbar-menu"] {
  z-index: z("composer", "dropdown");

  @include viewport.from(sm) {
    // making sure it's only limited in height on floating menu, not mobile menu
    &.fk-d-menu {
      max-height: 30vh;
    }
  }

  .fk-d-menu__inner-content {
    flex-direction: column;

    --fade-height: 2.5em;

    &::before,
    &::after {
      content: "";
      position: sticky;
      display: block;
      flex-shrink: 0;
      height: var(--fade-height);
      pointer-events: none;
      opacity: 0;
      z-index: 1;
    }

    &::before {
      top: 0;
      margin-bottom: calc(var(--fade-height) * -1);
      background: linear-gradient(to top, transparent, var(--secondary));
    }

    &::after {
      bottom: 0;
      margin-top: calc(var(--fade-height) * -1);
      background: linear-gradient(to bottom, transparent, var(--secondary));
    }
  }

  &.--scroll-top .fk-d-menu__inner-content::before,
  &.--scroll-bottom .fk-d-menu__inner-content::after {
    opacity: 1;
  }

  .fullscreen-composer & {
    z-index: z("header") + 1;
  }

  // eventho mobile composer shouldnt be used in conjuction with fk-d-menu (floating version), on tablets the possibility unfortunately exists
  .discourse-touch & {
    z-index: z("mobile-composer");
  }

  .shortcut {
    line-height: 1;
    vertical-align: middle;

    &.--apple {
      letter-spacing: 0.25em;
      padding-right: 0.35em;
    }

    @include viewport.until(sm) {
      display: none;
    }
  }
}

.toolbar-menu__options-content,
.toolbar-menu__list-content,
.toolbar-menu__heading-content {
  .dropdown-menu {
    .btn {
      &.--active {
        .d-button-label__active-icon {
          visibility: visible;
          margin-left: auto;
        }
      }
    }

    .d-button-label {
      display: flex;
      flex: 1;
      justify-content: space-between;
      align-items: center;
      min-width: 0; // shrink if needed

      &__active-icon {
        visibility: hidden;
      }

      .shortcut {
        margin-left: var(--space-4);
      }
    }
  }
}

.toolbar-menu__heading-content,
.toolbar-menu__list-content {
  .dropdown-menu {
    .btn {
      &:hover,
      &:focus,
      &:focus-visible {
        .shortcut {
          display: block;
        }

        .d-button-label__active-icon {
          visibility: hidden;
        }
      }
    }

    .d-button-label {
      position: relative;
      flex-grow: 1;
      display: flex;
      align-items: center;
      gap: var(--space-4);

      &__active-icon {
        visibility: hidden;
      }

      &__text {
        padding-right: var(--space-8); // extra spacing for the shortcut
      }

      .shortcut {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: none;
        margin: 0;
        font-size: var(--font-down-1-rem);
      }
    }
  }
}

.toolbar-menu__heading-content {
  .dropdown-menu {
    .btn[data-name="heading-1"] {
      .d-button-label__text,
      .d-icon[class*="d-icon-discourse"] {
        font-size: var(--font-up-2-rem);
        font-weight: bold;
      }
    }

    .btn[data-name="heading-2"] {
      .d-button-label__text,
      .d-icon {
        font-size: var(--font-up-1-rem);
        font-weight: bold;
      }
    }

    .btn[data-name="heading-3"] {
      .d-button-label__text,
      .d-icon {
        font-size: var(--font-0);
        font-weight: bold;
      }
    }

    .btn[data-name="heading-4"] {
      .d-button-label__text,
      .d-icon {
        font-weight: bold;
        font-size: var(--font-down-1-rem);
      }
    }

    .btn[data-name="heading-paragraph"] {
      .d-button-label__text,
      .d-icon {
        font-size: var(--font-down-1-rem);
      }
    }
  }
}