.mb[side-content] {
  .mb-sc-content-container{
    width: 400px;
    height: 100vh;
    position: fixed;
    right: 0px;
    top: 0px;
    left: auto;
    bottom: 0px;
    background-color: #fff;
    z-index: 1002;
    transform: translateX(100%);
    transition: transform 500ms ease, box-shadow 250ms linear;

    &.mb-sc-bg-hide {
      background-color: transparent;
    }

    &.mb-sc-preview {
      transform: translateX(95%);
      box-shadow: -3px 0px 100px 20px rgba(0,0,0,0.1);

      &.mb-sc-active {
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
      }
    }
    
    &.mb-sc-active {
      transform: translateX(0%);
    }
    
    &.mb-sc-active-bg-hide {
      transform: translateX(0%);
      top: calc(50% - 150px);
      height: min-content;
    }

    .mb-sc-anchor {
      position: relative;
      width: 100%;
      height: 100%;
      
      .mb-sc-content {
        width: 100%;
        height: 100%;
        background-color: transparent;
        position: relative;
        z-index: 1003;
      }
    }
  }

  .mb-sc-background {
    opacity: 0;
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 999;
    left: 0px;
    top: 0px;
    transition: opacity 250ms linear;
    will-change: opacity;

    &.mb-sc-bg-hide {
      display: none;
    }

    &.mb-sc-active {
      opacity: 1;
    }
  }
}