@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../../styles/mixins.scss';
//@import './variable.scss';

$class-prefix: 'cn-ui-m';
$sizes: small, medium, large;

$-drawer-title-height: $m-s-48;
$-drawer-title-padding-tb: $m-s-16;
$-drawer-title-font-size: $m-s-16;
$-drawer-content-corner: 0;

.#{$hashClassName}.#{$class-prefix}-drawer {
  box-sizing: border-box;
  background-color: $m-color-bg-white;
  overflow: hidden;
  box-shadow: none;
  position: relative;

  &--left {
    border-top-right-radius: $-drawer-content-corner;
    border-bottom-right-radius: $-drawer-content-corner;
    max-width: 100%;
  }

  &--right {
    border-top-left-radius: $-drawer-content-corner;
    border-bottom-left-radius: $-drawer-content-corner;
    max-width: 100%;
  }

  &--top {
    border-bottom-left-radius: $-drawer-content-corner;
    border-bottom-right-radius: $-drawer-content-corner;
    max-height: 100%;
  }

  &--bottom {
    border-top-left-radius: $-drawer-content-corner;
    border-top-right-radius: $-drawer-content-corner;
    max-height: 100%;
  }

  .#{$class-prefix}-drawer {
    &-footer {
      padding: $m-s-12;

      .cn-ui-m-button-group {
        width: 100%;
      }

      & > .cn-ui-m-button {
        margin-left: $m-s-8;

        &:first-child {
          margin-left: 0;
        }
      }
    }

    &-body {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: auto;
    }

    &-modal {
      // --modal-elevation: 300;
      z-index: $cn-drawer-z-index;
    }

    &-container {
      @include flex(column, flex-start, stretch);
      height: 100%;
      max-height: 100vh;
    }

    &-close {
      @include flex(row, center);
      position: absolute;
      right: 0;
      top: 0;
      height: $-drawer-title-height;
      padding: $-drawer-title-padding-tb;
      color: $m-color-text-tip;
      box-sizing: border-box;

      &-icon {
        font-size: $m-s-50;
      }

      .cn-ui-m-icon-medium .cn-ui-m-icon-remote {
        font-size: $m-s-16;
      }
    }

    &-title {
      padding: $-drawer-title-padding-tb 0;
      margin: 0 $-drawer-title-padding-tb;
      border-bottom-width: $m-s-1;
      border-bottom-style: solid;
      border-bottom-color: $m-color-bg-disabled;
      color: $m-color-text-title2;
      font-weight: $m-font-weight-semi-bold;
      font-size: $-drawer-title-font-size;
      line-height: calc(
        #{$-drawer-title-height} - #{$-drawer-title-padding-tb} * 2
      );
      box-sizing: border-box;
      flex-shrink: 0;
      height: $-drawer-title-height;

      flex-grow: 0;
      // @extend %ellipsis;

      &--center {
        text-align: center;
      }

      &--with-icon {
        padding-right: calc(#{$-drawer-title-font-size} * 1.2 + #{$m-s-8} * 2);
      }
    }
  }
}