.off-canvas-wrapper {
  @include breakpoint(medium up) {
    display: none;
  }
  &.search-page {
    display: block;
    @include breakpoint(large up) {
      display: none;
    }
    .off-canvas.custom {
      top: 144px;
      @include breakpoint(medium up) {
        top: 161px;
      }
      width: 78%;
      padding-left: 0;
      padding-right: 0;
      padding-top: 0;
      &[aria-hidden="true"] {
        transform: translateX(100%);
      }
    }
    .js-off-canvas-overlay {
      background-color: rgba(37, 39, 41, 0.52);
      transition: transform .5s;
      opacity: 1;
      visibility: visible;
      top: 144px;
      @include breakpoint(medium up) {
        top: 161px;
      }
      pointer-events: none;
      &.is-visible {
        transform: translate3d(0, 0, 0);
      }
      &:not(.is-visible) {
        transform: translate3d(100%, 0, 0);
      }
    }
  }

  .off-canvas.custom {
    width: 95%;
    background-clip: padding-box;
    background-color: white;
    top: 62px;
    box-shadow: none;
    padding: 16px;
    &[aria-hidden="true"] {
      transform: translateX(-100%);
    }
  }
  .js-off-canvas-overlay {
    background-color: rgba(68, 166, 104, 0.86);
    transition: transform .5s;
    opacity: 1;
    visibility: visible;
    &.is-visible {
      transform: translate3d(0, 0, 0);
    }
    &:not(.is-visible) {
      transform: translate3d(-100%, 0, 0);
    }
  }
}