index.less

@import '../../style/variable/index.less';
@import '../../style/mixins/box.less';
@import '../../style/mixins/reset.less';
@import '../../style//motion/move.less';

.@{drawer-prefix} {
  .reset-component-new();

  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;

  &-wrapper {
    position: fixed;
    outline: none;
    z-index: 1000;

    &.@{drawer-prefix}-with-mask {
      .box(fixed);
    }
  }

  &-opened {
    &.@{drawer-prefix}-push {
      transition: transform var(--ix-motion-duration-medium) var(--ix-motion-ease-out);
      transition-delay: var(--ix-motion-duration-fast);
    }
    &.@{drawer-prefix}-pull {
      transition: transform var(--ix-motion-duration-medium) var(--ix-motion-ease-in);
    }
  }

  &-sentinel {
    width: 0;
    height: 0;
    overflow: hidden;
    outline: none;
  }

  &-content {
    .reset-font-size();
    .reset-color();

    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    pointer-events: auto;
    overflow: hidden;
    border: var(--ix-drawer-border-width) var(--ix-drawer-border-type) var(--ix-drawer-border-color);

    > .@{header-prefix} {
      padding-left: 16px;
      padding-right: 16px;
    }
  }

  &-body {
    flex: 1;
    padding: 8px 16px;
    overflow: auto;
  }

  &-footer {
    display: flex;
    padding: 12px 16px;

    .@{button-prefix} + .@{button-prefix} {
      margin-left: 8px;
    }
  }

  &-start {
    .@{drawer-prefix}-content {
      box-shadow: var(--ix-drawer-box-shadow-start);
      border-left: none;
    }
  }

  &-end {
    .@{drawer-prefix}-content {
      box-shadow: var(--ix-drawer-box-shadow-end);
      border-right: none;
    }
  }

  &-top {
    .@{drawer-prefix}-content {
      box-shadow: var(--ix-drawer-box-shadow-top);
      border-top: none;
    }
  }
  &-bottom {
    .@{drawer-prefix}-content {
      border-bottom: none;
    }
  }
}