#main-section[data-mode="edit"] #nav-regular,
#main-section[data-mode="arrange"] #nav-regular,
#main-section:not([data-mode="edit"]) #nav-edit-title,
#main-section:not([data-mode="edit"]) #nav-edit {
  transform: translateY(-16rem);
}

#main-section[data-mode="arrange"] #card-viewer.current-scrollable {
  z-index: 1;
}

#main-section[data-mode="edit"] #folder-list-frame,
#main-section[data-mode="arrange"] #folder-list-frame {
  height: 0;
}

#main-section[data-mode="arrange"] .app-button.focused {
  transform: scale(1.72);
}

#main-section[data-mode="edit"] .card.focused > .card-panel {
  visibility: visible;
}

#main-section[data-mode="edit"] .card.delete > .card-panel {
  display: none;
}

#main-section[data-mode="edit"] .card.focused > smart-button {
  transform: scale(1.4);
}

#main-section[data-mode="arrange"] .card.hovered > smart-button {
  transform: scale(1.75);
  transition-delay: 0.1s;
}

#main-section[data-mode="arrange"] .card.focused.hover > smart-button {
  transform: scale(1.2);
  transition-delay: 0.1s;
}

#main-section[data-mode="edit"] .card.delete > smart-button {
  transform: scale(1.4) translateY(20rem);
  opacity: 0;
}

#main-section[data-mode="edit"] .card.focused > .card-panel smart-button {
  transform: translateY(0);
  opacity: 1;
}

#main-section[data-mode="edit"] .card.focused > .card-panel smart-button.focused {
  /* Override the transform of smart-button.focused, otherwise, the smart-button
     may drops down when focused */
  transform: scale(1.2) translateY(0);
}

#main-section[data-mode="edit"] .card > .card-panel smart-button:nth-child(2) {
  transition-delay: 0.1s;
}

/* Delete button may have 0.1s delay when focused */
#main-section[data-mode="edit"] .card.focused > smart-button:not(.focused) + .card-panel smart-button {
  transition-delay: 0s;
}

#main-section[data-mode="edit"] .card.focused > smart-button[app-type='deck'] ~ .card-panel,
#main-section[data-mode="edit"] .card.focused > smart-button.animation-bubble-start ~ .card-panel {
  display: none;
}

#main-section[data-mode="arrange"] .card.focused:after {
  position: absolute;
  left: -25.1rem;
  right: -25.1rem;
  top: -25.1rem;
  bottom: -25.1rem;
  content: ' ';
}

#card-list.exiting-edit-mode {
  transition: transform 0.8s cubic-bezier(.6, 0, 0, 1);
}

#main-section[data-mode="arrange"] .card:not(.focused) {
  filter: url(filter.svg#brightness50percent);
}

#main-section[data-mode="arrange"] .card.focused.left_arrow:after {
  background: url(images/animated_arrows_left.png) no-repeat left center / 13rem;
}

#main-section[data-mode="arrange"] .card.focused.right_arrow:after {
  background: url(images/animated_arrows_right.png) no-repeat right center / 13rem;
}

#main-section[data-mode="arrange"] .card.focused.up_arrow:after {
  background: url(images/animated_arrows_up.png) no-repeat top center / 13rem;
}

#main-section[data-mode="arrange"] .card.focused.left_arrow.down_arrow:after {
  background: url(images/animated_arrows_left.png) no-repeat left center / 13rem,
              url(images/animated_arrows_down.png) no-repeat bottom center / 13rem;
}

#main-section[data-mode="arrange"] .card.focused.right_arrow.down_arrow:after {
  background: url(images/animated_arrows_right.png) no-repeat right center / 13rem,
              url(images/animated_arrows_down.png) no-repeat bottom center / 13rem;
}

#main-section[data-mode="arrange"] .card.focused.left_arrow.up_arrow:after {
  background: url(images/animated_arrows_left.png) no-repeat left center / 13rem,
              url(images/animated_arrows_up.png) no-repeat top center / 13rem;
}

#main-section[data-mode="arrange"] .card.focused.right_arrow.up_arrow:after {
  background: url(images/animated_arrows_right.png) no-repeat right center / 13rem,
              url(images/animated_arrows_up.png) no-repeat top center / 13rem;
}

#main-section[data-mode="arrange"] .card.focused.left_arrow.right_arrow:after {
  background: url(images/animated_arrows_left.png) no-repeat left center / 13rem,
              url(images/animated_arrows_right.png) no-repeat right center / 13rem;
}

#main-section[data-mode="arrange"] .card.focused.left_arrow.right_arrow.down_arrow:after {
  background: url(images/animated_arrows_left.png) no-repeat left center / 13rem,
              url(images/animated_arrows_right.png) no-repeat right center / 13rem,
              url(images/animated_arrows_down.png) no-repeat bottom center / 13rem;
}

#main-section[data-mode="arrange"] .card.focused.left_arrow.right_arrow.up_arrow:after {
  background: url(images/animated_arrows_left.png) no-repeat left center / 13rem,
              url(images/animated_arrows_right.png) no-repeat right center / 13rem,
              url(images/animated_arrows_up.png) no-repeat top center / 13rem;
}

#main-section[data-mode="edit"] .background,
#main-section[data-mode="arrange"] .background {
  background-color: rgba(0, 0, 0, 0.8);
}

#main-section[data-mode="edit"] #card-list,
#main-section[data-mode="arrange"] #card-list {
  transition: transform 0.66s cubic-bezier(.25, 0, 0, 1);
}