@import '../../../style/mixins/index';

@prolayout-setting-drawer: ~'@{vts-prefix}-setting-drawer';
@prolayout-setting-drawer-btn-size: 50px;
@prolayout-setting-drawer-icon-size: 25px;

.@{prolayout-setting-drawer} {
      position: fixed;
      inset-block-start: 240px;
      inset-inline-end: 0px;
      z-index: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: @prolayout-setting-drawer-btn-size;
      height: @prolayout-setting-drawer-btn-size;
      font-size: 16px;
      text-align: center;
      border-end-start-radius: 4px;
      border-start-start-radius: 4px;
      -webkit-backdropilter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
      cursor: pointer;
      pointer-events: auto;
      opacity: 0.5;

      button.vts-btn {
            width: @prolayout-setting-drawer-btn-size;
            height: @prolayout-setting-drawer-btn-size;
            background-color: #1F2F3E;
            border-color: #1F2F3E;
            color: #fff;
            border-radius: 10px 0px 0px 10px;
      }

      i.vtsicon {
            font-size: @prolayout-setting-drawer-icon-size;
      }

      :hover {
            opacity: 1;
      }
}