@use "../../css/variables.module" as *;

.excalidraw {
  .dropdown-menu {
    max-width: 16rem;
    z-index: 1;

    &--placement-top {
      margin-bottom: 0.5rem;
    }

    &__submenu-trigger {
      &[aria-expanded="true"] {
        .dropdown-menu-item {
          background-color: var(--button-hover-bg);
        }
      }
    }

    &__submenu-trigger-icon {
      margin-left: auto;
      opacity: 0.5;
      svg g {
        stroke-width: 2;
      }
    }

    &--mobile {
      width: 100%;
      row-gap: 0.75rem;

      // When main menu is in the top toolbar, position relative to trigger
      &.main-menu {
        min-width: 232px;
        margin-top: 0;
        margin-bottom: 0;

        @media screen and (orientation: landscape) {
          max-width: 232px;
        }
      }

      .dropdown-menu-container {
        padding: 8px 8px;
        box-sizing: border-box;
        border-radius: var(--border-radius-lg);
        position: relative;
        transition: box-shadow 0.5s ease-in-out;
        display: flex;
        flex-direction: column;
        overflow-y: auto;

        &.zen-mode {
          box-shadow: none;
        }
      }
    }

    .dropdown-menu-container {
      background-color: var(--island-bg-color);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 1px;

      box-shadow: var(--box-shadow, var(--shadow-island));

      max-height: calc(100svh - var(--editor-container-padding) * 2 - 2.25rem);

      @at-root .excalidraw.theme--dark#{&} {
        box-shadow: var(--box-shadow, var(--shadow-island)),
          0 0 0 1px rgba(0, 0, 0, 0.15);
      }
    }

    .dropdown-menu-item-base {
      display: flex;
      column-gap: 0.625rem;
      padding: 0 0.5rem;
      font-size: 0.875rem;
      color: var(--color-on-surface);
      width: 100%;
      box-sizing: border-box;
      font-weight: 400;
      font-family: inherit;
    }

    &.manual-hover {
      // disable built-in hover due to keyboard navigation
      .dropdown-menu-item {
        &:hover {
          background-color: transparent;
        }

        &--hovered {
          background-color: var(--button-hover-bg) !important;
        }

        &--selected {
          background-color: var(--color-primary-light) !important;
        }
      }
    }

    &.fonts {
      margin-top: 1rem;
      // display max 7 items per list, where each has 2rem (2.25) height and 1px margin top & bottom
      // count in 2 groups, where each allocates 1.3*0.75rem font-size and 0.5rem margin bottom, plus one extra 1rem margin top
      max-height: calc(7 * (2rem + 2px) + 2 * (0.5rem + 1.3 * 0.75rem) + 1rem);

      @media screen and (min-width: 1921px) {
        max-height: calc(
          7 * (2.25rem + 2px) + 2 * (0.5rem + 1.3 * 0.75rem) + 1rem
        );
      }

      .dropdown-menu-item-base {
        display: inline-flex;
      }

      .dropdown-menu-group:not(:first-child) {
        margin-top: 1rem;
      }

      .dropdown-menu-group-title {
        font-size: 0.75rem;
        text-align: left;
        font-weight: 400;
        margin: 0 0 0.5rem;
        line-height: 1.3;
      }
    }

    .dropdown-menu-item {
      height: 2rem;
      padding: 0 0.5rem;
      background-color: transparent;
      border: none;
      align-items: center;
      cursor: pointer;
      border-radius: var(--border-radius-md);
      flex: 1 0 auto;

      @media screen and (min-width: 1921px) {
        height: 2.25rem;
      }

      &__text {
        display: flex;
        align-items: center;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        gap: 0.75rem;
      }

      &__shortcut {
        margin-inline-start: auto;
        opacity: 0.5;

        &--orphaned {
          text-align: right;
          font-size: 0.875rem;
          padding: 0 0.625rem;
        }
      }

      &--selected {
        background: var(--color-primary-light);
        --icon-fill-color: var(--color-primary-darker);
      }

      &:hover {
        background-color: var(--button-hover-bg);
        text-decoration: none;
      }

      &:active {
        background-color: var(--button-hover-bg);
        box-shadow: 0 0 0 1px var(--color-brand-active);
      }

      svg {
        width: 1rem;
        height: 1rem;
        display: block;
      }
    }

    .dropdown-menu-item-bare {
      align-items: center;
      height: 2rem;
      justify-content: space-between;

      @media screen and (min-width: 1921px) {
        height: 2.25rem;
      }

      svg {
        width: 1rem;
        height: 1rem;
        display: block;
      }
    }

    .dropdown-menu-item-custom {
      margin-top: 0.5rem;
    }

    .dropdown-menu-group-title {
      font-size: 14px;
      text-align: left;
      margin: 10px 0;
      font-weight: 500;
    }
  }

  .dropdown-menu-button {
    @include outlineButtonStyles;
    width: var(--lg-button-size);
    height: var(--lg-button-size);

    --background: var(--color-surface-mid);

    background-color: var(--background);

    @at-root .excalidraw.theme--dark#{&} {
      --background: var(--color-surface-high);
      &:hover {
        --background: #363541;
      }
    }

    &:hover {
      --background: var(--color-surface-high);
      background-color: var(--background);
      text-decoration: none;
    }

    &:active {
      box-shadow: 0 0 0 1px var(--color-primary);
    }

    &[disabled] {
      cursor: not-allowed;

      &:hover {
        --background: var(--color-surface-mid);
        background-color: var(--background);
      }

      &:active {
        box-shadow: none;
      }

      @at-root .excalidraw.theme--dark#{&} {
        &:hover {
          --background: var(--color-surface-high);
        }
      }
    }

    svg {
      width: var(--lg-icon-size);
      height: var(--lg-icon-size);
    }

    &--mobile {
      border: none;
      margin: 0;
      padding: 0;
      width: var(--default-button-size);
      height: var(--default-button-size);
    }
  }
}
