@import "../../../styles/mixins";

#LeftMainHeader {
  position: relative;

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

  .archived-badge {
    min-width: 1.5rem;
    height: 1.5rem;
    margin-left: auto;
    background: var(--color-gray);
    border-radius: 0.75rem;
    padding: 0 0.4375rem;
    color: white;
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-weight: 500;
    text-align: center;
    flex-shrink: 0;
  }

  .MenuItem.compact .archived-badge {
    background: none;
    padding: 0;
    color: var(--color-text-secondary);
  }

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

  [dir="rtl"] .archived-badge {
    margin-left: 0;
    margin-right: auto;
  }

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

    overflow-y: auto;
    @include overflow-y-overlay();
  }

  .passcode-lock {
    margin-left: 0.8125rem;
  }

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