@import './theme/default';
@import './theme/timing-functions';

$header-height: 56px;
$footer-height: 56px;
$transition-duration: 300ms;
$transition-backdrop-appear-duration: 300ms;
$drawer-ease-out: $timing-fn-ease-out-cubic;
$drawer-ease-in: $timing-fn-ease-in-cubic;
$z-index: 1010;

.zent-drawer {
  &-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba($color-black, 0.6);
    height: 100%;
    z-index: $z-index;
  }

  &-content {
    position: fixed;
    z-index: $z-index;
    display: flex;
    flex-direction: column;
    @include theme-color(background-color, stroke, 9);

    &--transparent {
      @include theme-shadow(modal);
    }
  }

  &-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 14px 16px;
    font-size: 20px;
    cursor: pointer;
  }

  &-header {
    line-height: $header-height;
    border-bottom: 1px solid;
    @include theme-color(border-color, stroke, 5);
    font-weight: 500;
    font-size: 16px;

    &__title {
      padding-left: 16px;
    }
  }

  &-body {
    flex-grow: 1;
    word-wrap: break-word;
    overflow: auto;
  }

  &-footer {
    border-top: 1px solid;
    line-height: $footer-height;
    @include theme-color(border-color, stroke, 5);
  }

  &-transition {
    @mixin appear($val: 100%, $placement: X) {
      transform: translate#{$placement }($val);
    }
    @mixin appear-active($val: 0, $placement: X) {
      transform: translate#{$placement }($val);
      transition: transform $transition-duration $drawer-ease-in;
    }
    @mixin exit($val: 0, $placement: X) {
      transform: translate#{$placement }($val);
    }
    @mixin exit-active($val: 100%, $placement: X) {
      transform: translate#{$placement }($val);
      transition: transform $transition-duration $drawer-ease-out;
    }

    &-top {
      &-appear {
        @include appear(-100%, Y);
      }

      &-appear-active {
        @include appear-active(0, Y);
      }

      &-exit {
        @include exit(0, Y);
      }

      &-exit-active {
        @include exit-active(-100%, Y);
      }
    }

    &-right {
      &-appear {
        @include appear;
      }

      &-appear-active {
        @include appear-active;
      }

      &-exit {
        @include exit;
      }

      &-exit-active {
        @include exit-active;
      }
    }

    &-bottom {
      &-appear {
        @include appear(100%, Y);
      }

      &-appear-active {
        @include appear-active(0, Y);
      }

      &-exit {
        @include exit(0, Y);
      }

      &-exit-active {
        @include exit-active(100%, Y);
      }
    }

    &-left {
      &-appear {
        @include appear(-100%, X);
      }

      &-appear-active {
        @include appear-active(0, X);
      }

      &-exit {
        @include exit(0, X);
      }

      &-exit-active {
        @include exit-active(-100%, X);
      }
    }

    &__backdrop {
      &-appear {
        opacity: 0;
      }

      &-appear-active {
        opacity: 1;
        transition: opacity $transition-backdrop-appear-duration $drawer-ease-in;
      }

      &-exit {
        opacity: 1;
      }

      &-exit-active {
        opacity: 0;
        transition: opacity $transition-duration $drawer-ease-out;
      }
    }
  }
}