@import "tools.functions";

@mixin c-menu-panel--sm {
  .c-menu-panel__close-button--first {
    text-align: left;
    position: fixed;
    right: rem(20);
    z-index: 2;
  }
  .c-menu-panel__close-button--second {
    display: none;
  }
  .c-menu-panel__page {
    max-width: rem(580);
  }
  .c-menu-panel__page--categories {
    .c-menu-panel__pane {
      &:nth-child(2) {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-end;
        .c-menu-panel__sub-pane {
          width: 50%;
          flex: 0 0 auto;
          // sass-lint:disable nesting-depth
          &:first-child {
            padding-right: rem(10);
          }
          &:last-child {
            padding-left: rem(10);
          }
          // sass-lint:enable nesting-depth
        }
      }
    }
    .c-search-box {
      display: none;
    }
  }
}

@mixin c-menu-panel--md {
  .c-menu-panel__page {
    max-width: rem(830);
  }
  .c-menu-panel__page--categories {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    .c-menu-panel__pane {
      flex: 0 0 auto;
      &:first-child {
        width: 64%;
        padding-right: rem(10);
      }
      &:nth-child(2) {
        width: 36%;
        padding-left: rem(10);
        display: block;
        .c-menu-panel__sub-pane {
          &:first-child,
          &:last-child {
            width: 100%;
            padding-left: 0;
            padding-right: 0;
          }
        }
      }
    }
  }
}
