@use "../../../styles/mixins";

#LeftMainHeader {
  position: relative;

  .DropdownMenuFiller {
    width: 2.5rem;
    height: 2.5rem;
  }

  .DropdownMenu.rtl {
    transition: var(--slide-transition) transform;
    position: absolute;
    z-index: 2;

    &.right-aligned {
      transform:
        translateX(
          calc(
            clamp(
              var(--left-column-min-width),
              var(--left-column-width),
              var(--left-column-max-width)
            ) - 4.375rem
          )
        );
    }

    &.disable-transition {
      transition: none;
    }
  }

  .animated-menu-icon {
    position: absolute;

    &,
    &::before,
    &::after {
      width: 1.125rem;
      height: 0.125rem;
      border-radius: 0.125rem;
      background-color: var(--color-text-secondary);
      transition: transform 0.25s;
      transform: rotate(0);
    }

    &::before,
    &::after {
      position: absolute;
      left: 0;
      content: "";
    }

    &::before {
      top: -0.3125rem;
    }

    &::after {
      top: 0.3125rem;
    }

    &.state-back {
      transform: rotate(180deg);

      &::before {
        transform: rotate(45deg) scaleX(0.75) translate(0.375rem, -0.1875rem);
      }

      &::after {
        transform: rotate(-45deg) scaleX(0.75) translate(0.375rem, 0.1875rem);
      }
    }

    &.no-animation {
      transition: none;

      &::before,
      &::after {
        transition: none;
      }
    }
  }

  .MenuItem .Toggle {
    margin-inline-start: auto;
  }

  .MenuItem.compact .Toggle {
    transform: scale(0.75);
    margin-inline-end: -0.125rem;
  }

  .MenuItem.compact .Switcher {
    transform: scale(0.75);
  }

  .Menu .bubble {
    min-width: 17rem;
    max-height: calc(100 * var(--vh) - 3.75rem);

    overflow-y: auto;
  }

  .extra-spacing {
    position: relative;
    margin-left: 0.8125rem;

    body.is-electron.is-macos #Main:not(.is-fullscreen) & {
      margin-left: 0.5rem;
    }
  }

  .emoji-status-effect {
    top: 50%;
    left: 50%;
  }

  .emoji-status {
    --custom-emoji-size: 1.5rem;
    color: var(--color-primary);
  }

  .StarIcon {
    width: 1.5rem;
    height: 1.5rem;
  }

  // @optimization
  @include mixins.while-transition() {
    .Menu .bubble {
      transition: none !important;
    }
  }

  .SearchInput {
    transition: opacity var(--layer-transition);

    &--hidden {
      opacity: 0;
      pointer-events: none;
    }
  }

  .left-search-picker-item {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    padding-right: 0;

    &[dir="rtl"] {
      left: auto;
      right: -0.125rem;
    }
  }
}