// layout
.yc-layout {
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.yc-layout-has-sider {
  flex-direction: row;
}

// 通用
.yc-layout,
.yc-layout-header,
.yc-layout-footer,
.yc-layout-sider,
.yc-layout-content {
  flex-shrink: 0;
}
.yc-layout-header,
.yc-layout-footer {
  width: 100%;
}
.yc-layout-sider {
  height: 100%;
}

.yc-layout-content {
  flex: 1;
}

// sider
.yc-layout-sider {
  position: relative;
  flex: none;
  margin: 0;
  padding: 0;
  .yc-layout-sider-children {
    height: 100%;
    overflow: auto;
  }
  .yc-layout-sider-trigger {
    position: absolute;
    left: 0;
    bottom: 0;
    cursor: pointer;
    height: 48px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.yc-layout-sider-has-trigger {
  padding-bottom: 48px;
}
.yc-layout-sider-translation {
  transition: width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
}

@layout-theme: light, dark;
each(@layout-theme,{
  .yc-layout-sider-@{value}{
    background-color: if(@value=light,var(--color-menu-light-bg),var(--color-menu-dark-bg));
    box-shadow: if(@value=light,0 2px 5px 0 rgba(0, 0, 0, 0.08),none);
    .yc-layout-sider-trigger{
      background-color: if(@value=light,unset,rgba(255, 255, 255, 0.2));
      border-top: if(@value=light,1px solid var(--color-bg-5),none);
      color: if(@value=light, var(--color-text-1),var(--color-white));
    }
  }
});
