@prefix: deye-menu-layout;

.@{prefix} {
  &- {
    &root {
      position: relative;
      height: 100%;
      display: flex;
      flex-direction: column;
    }


    &header, &footer {
      position: relative;
      width: 100%;
      flex-shrink: 0;
      flex-basis: 40px;
    }

    &body {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: stretch;
      flex: 1;
      flex-basis: 40px;
    }

    &left, &right {
      position: relative;
      flex-shrink: 0;
      flex-basis: 200px;
    }

    &center {
      position: relative;
      flex: 1;
    }

    &header, &footer, &left, &right, &center {
      > * {
        height: 100%;
      }
    }
  }
}