.ks-sidebar {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;

  &__search-container {
    padding: var(--space-m);
    border-bottom: 1px solid var(--c-frame);
  }

  &__content {
    flex: 1;
  }

  &__enable-edit-btn {
    position: absolute;
    right: var(--space-m);
    bottom: var(--space-m);
    z-index: 5;
    opacity: 1;
    animation: showEditBtn 300ms ease 200ms;
    transition: opacity 0ms linear 200ms;
    will-change: transform, opacity, z-index;

    &--hidden {
      animation: hideEditBtn 550ms ease 100ms;
      z-index: -1;
      opacity: 0;
      transition: opacity 0ms linear 650ms,
                z-index 0ms step-end 650ms;
    }
  }

  &__edit-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    height: 0px;
    animation: hideEditPanel 315ms step-end;
    will-change: overflow, height;

    &__content {
      background-color: var(--c-bg);
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: var(--space-m);
      box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.08);
      transform: translateY(100%);
      transition: transform 300ms cubic-bezier(1, -.4, 0.5, 1);
      will-change: transform;
    }
  }
  &__edit-panel--show {
    overflow: visible;
    height: auto;
    animation: showEditPanel 430ms step-start;

    .ks-sidebar__edit-panel__content {
      transform: translateY(0%);
      transition: transform 400ms cubic-bezier(0.5, 0, 0, 1) 15ms;
    }
  }
}

/* stylelint-disable function-calc-no-invalid */
@keyframes hideEditBtn {
  0% {
    transform:
      translateX(0)
      rotate(0deg)
      scale(1);
  }
  50% {
    transform:
      translateX(calc((var(--sidebar-width) - (var(--space-m) * 2) - var(--space-xl)) * -1))
      rotate(-360deg)
      scale(1);
  }
  100% {
    transform:
      translateX(calc((var(--sidebar-width) - (var(--space-m) * 2) - var(--space-xl)) * -1))
      rotate(-360deg)
      scale(0);
  }
}
/* stylelint-enable function-calc-no-invalid */

@keyframes showEditBtn {
  0% {
    transform: rotate(-360deg) scale(0);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

@keyframes hideEditPanel {
  0% {
    height: auto;
    padding-top: 1em;
  }
  99% {
    height: auto;
    padding-top: 1em;
  }
  100% {
    height: 0px;
    padding-top: 0;
  }
}

@keyframes showEditPanel {
  0% {
    overflow: hidden;
    padding-top: 1em;
  }
  99% {
    overflow: hidden;
    padding-top: 1em;
  }
  100% {
    overflow: visible;
    padding-top: 0;
  }
}