@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 .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 .45rem;
    color: white;
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-weight: 500;
    text-align: center;
    flex-shrink: 0;
  }

  [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;
    overflow-y: overlay;
  }

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