// code from /css/widget-sidebar.scss

$break_point_xl: 1200px;


.widget-right-sidebar-wrapper {

  .widget-right-sidebar-toggle {
    display: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 160px;
    left: -40px;
    padding: 0px;
    color: black;
    font-size: 17px;
    line-height: 38px;
    text-align: center;
    background: white;
    border-radius: 20px 0 0 20px;

    .toggle-close {
      display: none;
    }
  }


  &::before {
    background: #000;
    position: fixed;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2000;
    min-height: 100vh;
    opacity: 0;
    transition: opacity 0.2s ease-in-out 0s;
    pointer-events: none;
  }


  .widget-right-sidebar {
    position: relative;
    transition: transform 0.24s;

    .widget-right-sidebar-inner {
      position: relative;
    }

  }


  @media(max-width: $break_point_xl) {

    .widget-right-sidebar-toggle {
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 6px 6px 15px 2px rgba(0, 0, 0, 0.3);
    }


    .widget-right-sidebar {
      z-index: 2001;
      position: fixed;
      height: 100%;
      width: 260px;
      transform: translateX(260px);
      top: 0;
      right: 0;
      padding: 20px;
      background: white;

      .widget-right-sidebar-inner {

        overflow-y: auto;
        height: 100%;
        padding-top: 0px;
        padding-right: 10px;
        padding-bottom: 20px;
      }
    }


    &.active {
      &::before {
        opacity: .35;
      }

      .widget-right-sidebar-toggle {
        box-shadow: none;

        .toggle-open {
          display: none;
        }

        .toggle-close {
          display: block;
        }
      }

      .widget-right-sidebar {
        transform: translateX(0px);
        box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.5);
      }
    }
  }
}

document.addEventListener('DOMContentLoaded', (event) => {
    $('#my-tool-sidebar .widget-right-sidebar-toggle').on('click', function () {
        $('#my-tool-sidebar').toggleClass("active");
    });
});