@use 'variables' as *;

@mixin theme() {
  .x-layout {
    flex: auto;
    display: flex;
    flex-direction: column;

    &-content {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
    }

    &-footer {
      flex: 0 0 auto;
      display: flex;
      height: 53px;

      align-items: center;
    }

    &-header {
      flex: 0 0 auto;
      display: flex;
      height: $height;

      align-items: center;
    }

    &-has-sider {
      flex-direction: row;
    }

    &-sider {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}