@import '../custom.less';

@drawer-prefix-cls: ~'@{css-prefix}drawer';
@button-prefix-cls: ~'@{css-prefix}button';

.@{drawer-prefix-cls} {
  @apply text-sm;

  .@{drawer-prefix-cls}__mask {
    @apply fixed;
    @apply ~'z-[2000]';
    @apply left-0;
    @apply right-0;
    @apply top-0;
    @apply bottom-0;
    @apply w-full;
    @apply h-full;
    @apply transition-opacity;
    @apply ease-linear;
    @apply duration-200;
  }

  .@{drawer-prefix-cls}-mask__toggle {
    @apply bg-color-bg-7;
  }

  .@{drawer-prefix-cls}-main {
    @apply fixed;
    @apply w-full;
    @apply max-w-full;
    @apply flex;
    @apply flex-col;
    @apply bg-color-bg-1;
    @apply ~'z-[2000]';
    @apply shadow-sm;
    @apply border-color-border-separator;
  }

  .@{drawer-prefix-cls}-main.is-drag {
    @apply transition-all;
    @apply ease-linear;
    @apply duration-200;
  }

  .@{drawer-prefix-cls}-main.placement-left {
    @apply left-0;
    @apply top-0;
    @apply -translate-x-full;
    @apply ~'border-r-0.5';
    @apply rounded-r-lg;
    @apply h-full;

    &.dragable .drawer-body {
      @apply mr-6;
    }
  }

  .@{drawer-prefix-cls}-main.placement-right {
    @apply right-0;
    @apply top-0;
    @apply translate-x-full;
    @apply ~'border-l-0.5';
    @apply h-full;

    &.dragable .drawer-body {
      @apply ml-6;
    }
  }

  .@{drawer-prefix-cls}-main.placement-bottom {
    @apply left-0;
    @apply bottom-0;
    @apply translate-y-full;
    @apply ~'border-t-0.5';
    @apply rounded-t-lg;
    @apply max-h-full;
  }

  .@{drawer-prefix-cls}-main.placement-top {
    @apply left-0;
    @apply top-0;
    @apply -translate-y-full;
    @apply ~'border-b-0.5';
    @apply rounded-b-lg;
    @apply max-h-full;
  }

  .@{drawer-prefix-cls}-main.toggle-left-right {
    @apply translate-y-0;
  }

  .drawer-drag-bar {
    @apply absolute;

    &.p-top-Bottom {
      @apply w-full;
      @apply h-2;
      @apply left-0;
      @apply cursor-n-resize;
    }

    &.p-left-Right {
      @apply h-full;
      @apply top-0;
      @apply w-2;
      @apply cursor-e-resize;
    }

    &.p-left {
      @apply -right-1;
    }

    &.p-right {
      @apply -left-1;
    }

    &.p-top {
      @apply -bottom-1;
    }

    &.p-bottom {
      @apply -top-1;
    }

    .pause-icon {
      @apply w-6;
      @apply h-6;
      @apply fill-color-icon-tertiary;
      @apply absolute;
      @apply scale-y-125;
      @apply scale-x-110;

      &.icon-right {
        @apply top-1/2;
        @apply left-1;
        @apply -translate-y-1/2;
      }

      &.icon-left {
        @apply top-1/2;
        @apply right-1;
        @apply -translate-y-1/2;
      }

      &.icon-top {
        @apply left-1/2;
        @apply bottom-1;
        @apply -translate-x-1/2;
        @apply rotate-90;
      }

      &.icon-bottom {
        @apply left-1/2;
        @apply top-1;
        @apply -translate-x-1/2;
        @apply rotate-90;
      }
    }
  }

  .drawer-wrap {
    @apply flex-auto;
    @apply flex-col;
    @apply flex;
    @apply max-h-full;
    @apply overflow-hidden;
  }

  .drawer-header {
    @apply flex-none;
    @apply flex;
    @apply leading-6;
    @apply py-4 px-6;
    @apply text-base;
    @apply items-center;
  }

  .drawer-header .title {
    @apply ~'max-w-[80%]';
    @apply pr-4;
    @apply text-left;
    @apply truncate;
    @apply text-color-text-primary;
  }

  .drawer-header .header-right {
    @apply flex-1;
    @apply flex;
    @apply items-center;
    @apply justify-end;
  }

  .drawer-header .header-right .close-icon {
    @apply h-4;
    @apply w-4;
    @apply cursor-pointer;
    @apply fill-color-text-primary;
  }

  .drawer-body {
    @apply flex-auto;
    @apply overflow-auto;
  }

  .drawer-body.display-flex {
    @apply flex;
    @apply flex-col;
  }

  .drawer-footer {
    @apply px-4;
    @apply py-3;
  }

  .drawer-footer > div {
    @apply flex-1;
    @apply text-right;
  }
}