// Menu

aside.sidebar {
  ul li {
    transition: transform 0.25s, height 0.25s, visibility 0.5s;

    &.ui-sortable-helper {
      transition: none;
    }

    button.slide-out {
      transition: transform 0.2s ease-in-out;
    }

    ul.sub-menu {
      li {
        transition: background 0.05s ease-in-out, height 0.25s ease-out,
          opacity 0.25s ease-out;
      }
      .badge {
        // ANIMATION
        transition: max-width @animationSpeed;
      }
    }
  }
}

// Browser bar
.browser-bar {
  .url-input {
    transition: opacity 0.1s;
  }
}

.popup-windows {
  position: relative;
  perspective: 800px;

  .field-container {
    transform-style: preserve-3d;
    transition: transform 0.5s;
    transition-timing-function: ease-out;
    transition-timing-function: cubic-bezier(0, 1.125, 0.335, 1.65);
    height: @gridHeight*1.5;

    & > * {
      position: absolute;
      left: @gridWidth*2;
      top: -1 * @gridHeight;
      backface-visibility: hidden;
    }

    .password-repeat {
      transform: rotateX(180deg);
    }

    &.repeat-field {
      transform: rotateX(180deg);
    }
  }
}
