.layout {
  .sider {
    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
  }
  .header {
    padding: 0;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    position: relative;
    background-color: $white;
    .header-logo {
      display: inline-block;
      line-height: 58px;
      vertical-align: top;
      padding: 0 0 0 24px;
      cursor: pointer;
    }
    .trigger {
      font-size: 20px;
      height: 64px;
      cursor: pointer;
      transition: all 0.3s, padding 0s;
      padding: 22px 24px;
      @include responsive-to("mobile") {
        padding: 22px 12px;
      }
    }
  }
  .content {
    margin: 24px 24px 0;
    min-height: 280px;
    .content-header {
      margin: -24px -24px 0px;
      background: $white;
      padding: 16px 32px 0;
      border-bottom: 1px solid $grey;
    }
    .content-body {
      padding-top: 24px;
    }
  }
}
.sider-drawer {
  .ant-drawer-body {
    padding: 0px;
    height: 100vh;
  }
}

.sider-drawer,
.layout .sider {
  .logo {
    width: 100%;
    height: 64px;
    line-height: 64px;
    padding-left: 24px;
    transition: all 0.3s;
    overflow: hidden;
    box-shadow: 1px 1px 0 0 #e8e8e8;
    .logo-label {
      vertical-align: middle;
      font-size: 20px;
      margin: 0 0 0 12px;
      font-weight: 600;
    }
  }
}

.sider-drawer,
.layout {
  &.dark {
    .logo {
      background-color: $black;
      .logo-label {
        color: $white;
      }
    }
  }
  &.light {
    .logo {
      background-color: $white;
      .logo-label {
        color: $black;
      }
    }
  }
}