comty/src/components/Layout/Overlay/index.less

@import '~theme/index.less';

.render_component {
  width: 100%;
  height: 100%;

  background-color: #fff;
  border-radius: 8px;
  padding: 10px;


  h2,h3,h4{
    color: #9597A1;
    font-family: Netflix Sans;
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 15px;
  }
}

.exit_button{
  position: relative;
  z-index: 52;

  left: 0;

  //padding: 10px 0px 0 15px;
  :global{
    .ant-btn{
      background-color: #fff;
      border-radius: 8px;
    }
  }
}

.Overlay_wrapper {
  user-select: none;
  right: 0;
  top: 0;
  z-index: 50;
  
  height: 100%;
  // 150px extra for left-sider
  width: 87%;
  backdrop-filter: blur(2px);
  &.mobile{
    overflow-y: scroll;
    flex-direction: column;
    width: 0;
    height: 0;
  
    &.active{
      position: absolute;
      width: 100%;
      height: 100%;
      width: none;
    }
  }

  &.undocked {
    display: none;
  }
  
  &.expand{
    max-width: calc(100% + 150px);
  }

  transition: all @__app_SwapDuration ease-in-out;
}

.overlay_primary_wrapper {
  height: 100%;
  width: 100%;

  max-width: @Overlay_wrapper_maxwidth;
  min-width: 200px;

  display: flex;
  z-index: 50;

  right: 0;
  padding: 30px 30px 30px 35px;

  
  @media (max-width: @screen-md) {
    padding: 30px 5px;
  }

  color: @Overlay_container1_def_color;

  .renderBody{
    height: 100%;
    width: 100%;
    > div {
      margin-bottom: 35px;
    }
  }

  &.half {
    background-color: #2d2d2d;
    color: @Overlay_container1_active_color;
    max-width: calc(100% + 150px);
  }

  &.full{
    max-width: none;
    background-color: transparent;
    position: absolute;
    width: 100vw;
    height: 100vh;
  }

  :global {
    .ant-btn {
      color: @Overlay_container_1_btn_color;
      background-color: @Overlay_container_1_btn_backgroud;
      border-color: transparent;
      border-radius: 12px;
    }

    .ant-btn:hover {
      box-shadow: @Overlay_container_1_btn_shadow;
      transition: all @__Global_Components_transitions_dur linear;
    }
  }

  transition: all @__app_SwapDuration ease-in-out;
  border-radius: @__Global_layout_border-rd;
}


.overlay_secondary_wrapper {
    position: absolute;
    z-index: 55;
    height: 100vh;
    right: 0;
    width: 0;
    opacity: 0;

    padding: @Overlay_container2_padding;
    
    color: @Overlay_container2_color!important;
    background-color: @Overlay_container2_backgroud;
  
    border-radius: 32px 0 0 32px;
  
    &.active {
      width: @Overlay_container2_active_width;
      opacity: 1;
    }
  
  
    transition: all @__app_SwapDuration ease-in-out;
    
  }


  .renderSearch_wrapper {
    height: 87vh;
    overflow: hidden;
    margin: 20px 0 0;
    font-family: @__app_generalFont;
    h2 {
      color: #ffffff;
    }
  }


  .mainElement {
    > div {
      margin: 30px 0;
    }
  }