.msp-offcanvas {
  &-content {
    overflow: hidden;
    position: fixed;
    height: 100vh;
    z-index: 5;

    background-color: var(--msp-color-bg);

    top: 0;
    left: 0;

    padding: var(--msp-spacing-3);

    transition: left 0.4s ease-in-out;

    &.show {
      left: 50%;

      .msp-offcanvas-backdrop {
        width: 100vw;
        opacity: 40%;
        transition:
          opacity 0.8s ease,
          left 0s linear;
      }
    }

    &-body,
    &-header,
    &-footer {
      position: relative;
      z-index: 5;
    }
  }

  &.show {
    left: 50%;

    .msp-offcanvas-backdrop {
      width: 100vw;
      opacity: 40%;
      transition:
        opacity 0.8s ease,
        left 0s linear;
    }
  }

  .msp-offcanvas-backdrop {
    position: fixed;
    height: 100vh;
    width: 0;
    z-index: 4;

    background-color: rgba(0, 0, 0);
    opacity: 0;

    top: 0;
    left: 0;

    // Delay the left transition on remove so it's desn't appear to be sliding or to be not working
    transition:
      opacity 0.8s ease,
      width 0s linear 1s;
  }
}