@import "../../css/variables.module";

.excalidraw {
  .dropdown-menu {
    position: absolute;
    top: 100%;
    margin-top: 0.25rem;

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

      .dropdown-menu-container {
        padding: 8px 8px;
        box-sizing: border-box;
        // background-color: var(--island-bg-color);
        box-shadow: var(--shadow-island);
        border-radius: var(--border-radius-lg);
        position: relative;
        transition: box-shadow 0.5s ease-in-out;

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

    .dropdown-menu-container {
      background-color: var(--island-bg-color);
      max-height: calc(100vh - 150px);
      overflow-y: auto;
      --gap: 2;
    }

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

    .dropdown-menu-item {
      background-color: transparent;
      border: 1px solid transparent;
      align-items: center;
      height: 2rem;
      cursor: pointer;
      border-radius: var(--border-radius-md);

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

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

      &__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;
      }

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

      &:active {
        background-color: var(--button-hover-bg);
        border-color: var(--color-brand-active);
      }

      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 {
      border-color: var(--color-primary);
    }

    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);
    }
  }
}