@import "variable";
@import "animation";

.vue-simple-drawer {
  // default style
  padding: 20px;
  color: $--simple-drawer-fg-color;
  background: $--simple-drawer-bg-color;
  // common
  position: fixed;
  overflow: auto;
  // top: 0;
  // z-index: 99;
  // bottom: 0;

  &.closeable {
    padding-top: 40px;
  }
  &.left {
    left: 0;
    top: 0;
    bottom: 0;
  }

  &.right {
    right: 0;
    top: 0;
    bottom: 0;
  }
  &.up {
    top: 0;
    left: 0;
    right: 0;
  }

  &.down {
    bottom: 0;
    left: 0;
    right: 0;
  }

  .close-btn {
    // position: relative;
    // margin: auto;
    width: $--simple-drawer-close-width;
    height: $--simple-drawer-close-width;
    // margin-top: 100px;
    // cursor: pointer;
    position: absolute;
    right: 0;
    top: 20px;
    // z-index: 100;
    transform: translate(-50%, -50%);
    color: currentColor;
    font-size: 20px;
    cursor: pointer;
    user-select: none;
    .leftright {
      height: 4px;
      width: $--simple-drawer-close-width;
      position: absolute;
      margin-top: calc($--simple-drawer-close-width/2);
      background-color: $--simple-drawer-softorange;
      border-radius: 2px;
      transform: rotate(45deg);
      transition: all 0.3s ease-in;
    }

    .rightleft {
      height: 4px;
      width: $--simple-drawer-close-width;
      position: absolute;
      margin-top: calc($--simple-drawer-close-width/2);
      background-color: $--simple-drawer-softorange;
      border-radius: 2px;
      transform: rotate(-45deg);
      transition: all 0.3s ease-in;
    }
    .close {
      margin: 60px 0 0 5px;
      position: absolute;
    }

    &:hover .leftright {
      transform: rotate(-45deg);
      background-color: $--simple-drawer-tomatored;
    }
    &:hover .rightleft {
      transform: rotate(45deg);
      background-color: $--simple-drawer-tomatored;
    }
  }
}
.mask {
  position: fixed;
  background: grey;
  opacity: 0.5;
  width: 100%;
  left: 0;
  top: 0;
  height: 100%;
  // &::before {
  //   content: "";
  //   position: absolute;
  //   background: grey;
  //   opacity: 0.5;
  //   width: 100%;
  //   left: 0;
  //   top: 0;
  //   height: 100%;
  //   // z-index: 98;
  // }
}
