@import (reference) './variables.less';

.menu-layout {
  .left {
    display: none;
    position: absolute;
    width: @left-width;

    @media @medium {
      display: block;
    }
  }

  .right {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: @right-width;

    @media @small {
      display: block;
    }
  }

  .center {
    width: 100%;
    padding: 0 @mobile-padding;

    @media @small {
      width: calc(100% - (@right-width + @margin));
      margin-right: @right-width + @margin;
    }

    @media @medium {
      width: calc(100% - (@left-width + @right-width + 2 * @margin));
      margin-left: @left-width + @margin;
      padding: 0;
    }
  }
}

div[data-dir='rtl'] .menu-layout {
  .center {
    @media @small {
      margin-left: @right-width + @margin;
      margin-right: 0;
    }

    @media @medium {
      margin-right: @left-width + @margin;
      margin-left: 0;
      padding: 0;
    }
  }
}

div[data-dir='rtl'] .menu-layout > div > div {
  margin-right: 0px !important;
  margin-left: -15px !important;
}
