.oc-container {
  display: flex;
  flex-direction: column;

  .oc-header {
    display: flex;
    margin-bottom: 8px;

    .oc-filter {
      flex: 1;
      margin-right: 16px;
      display: flex;
      align-items: center;
    }
  }

  .oc-content {
    display: flex;
    flex-direction: column;
    width: 100%;

    .oc-pagination {
      margin: 16px 0;
      width: 100%;
    }
  }
}

.oc-filter-inset {
  display: flex;
  justify-content: flex-end;
  flex: 1;

  .oc-quick-select {
    flex: 1;
    display: flex;

    .mt-selectdrawer {
      flex: 1;
      justify-content: center;
    }
    .mt-selectdrawer-content--medium {
      padding: 0;
      line-height: 1.5;
      font-size: 15px;
      flex: none;
    }
    .mt-selectdrawer-icon--medium {
      padding: 0;
      & > .mt-icon-arrow-right::before {
        // 把右箭头换成下箭头
        content: '\e8a7';
      }
    }
  }
  .oc-filter-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    cursor: pointer;
  }
}

// 最外层的modalclass， css控制抽屉hide和show
.oc-filter-root-drawer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, z-index 0.3s 0.3s;
  transform: translateX(100vw);

  &.show {
    z-index: 200; // 调低层级
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
  }
}
.oc-filter-drawer {
  width: 100%;
  height: 100%;

  // 解决表单内容align的问题 hack
  .mt-form-item-input.mt-form-item-input--right .mt-input-textinput--left {
    text-align: right;
  }
  .oc-filter-drawer-footer {
    display: flex;
    width: 100%;

    & > div {
      flex: 1;

      &:first-child {
        margin-right: 12px;
      }
    }
  }
}