.drawer-layout {
  display: flex;
  flex-direction: row;
  position: relative;
  overflow: hidden;
}

.drawer-layout__toggle {
  margin: auto;
  cursor: pointer;
  display: inline-block;
  padding: var(--padding);

  .bar {
    transition: .3s;
    background: var(--primary-color);
    margin: 1px auto;
    width: 12px;
    height: 4px;

    &:first-child {
      transform: rotate(-45deg);
    }
    &:last-child {
      transform:  rotate(45deg);
    }
  }
}

.drawer-layout__input {
  display: none !important;

   + div > div {
    transition: all .3s;
    box-sizing: border-box;
    overflow-y: auto;
    max-height: 100%;
    position: absolute;
    left: 0;
    right: 0;
  }
  &:first-child:checked + div > div {
    right: 100%;
    left: -100%;
  }
  &:not(:first-child):checked + div > div {
    left: 100%;
    right: -100%;
  }
  &:checked + div > .drawer-layout__toggle > .bar {
    &:first-child {
      transform: rotate(45deg);
    }
    &:last-child {
      transform: rotate(-45deg);
    }
  }
}

@media (min-width: 600px) {
  .drawer-layout__input {
    + div > div {
      position: static;
      width: var(--drawer-width);
    }
    &:first-child:checked + div > div {
      margin-left: calc(var(--drawer-width) * -1);
    }
    &:not(:first-child):checked + div > div {
      margin-right: calc(var(--drawer-width) * -1);
    }
  }
}