@drawerPrefixCls: react-drawer;

@keyframes reactDrawerFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes reactDrawerFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes reactDrawerFadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reactDrawerFadeOutRight {
  from {
    opacity: 1;
    transform: none;
  }

  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes reactDrawerFadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reactDrawerFadeOutLeft {
  from {
    opacity: 1;
    transform: none;
  }

  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}

.@{drawerPrefixCls} {
  &.@{drawerPrefixCls}-close {
    display: none;
  }

  .@{drawerPrefixCls}-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
  }

  .@{drawerPrefixCls}-content {
    position: fixed;

    &.@{drawerPrefixCls}-left {
      top: 0;
      left: 0;
      height: 100%;
    }

    &.@{drawerPrefixCls}-right {
      top: 0;
      right: 0;
      height: 100%;
    }
  }

  &.@{drawerPrefixCls}-opening {
    .@{drawerPrefixCls}-overlay {
      animation: 0.5s reactDrawerFadeIn;
    }

    .@{drawerPrefixCls}-content {
      &.@{drawerPrefixCls}-right {
        animation: 0.5s reactDrawerFadeInRight;
      }
      &.@{drawerPrefixCls}-left {
        animation: 0.5s reactDrawerFadeInLeft;
      }
    }
  }

  &.@{drawerPrefixCls}-closing {
    .@{drawerPrefixCls}-overlay {
      animation: 0.5s forwards reactDrawerFadeOut; // backwards forwards
    }

    .@{drawerPrefixCls}-content {
      &.@{drawerPrefixCls}-right {
        animation: 0.5s forwards reactDrawerFadeOutRight;
      }
      &.@{drawerPrefixCls}-left {
        animation: 0.5s forwards reactDrawerFadeOutLeft;
      }
    }
  }
}