@import './common/var.scss';

@keyframes show-icon-left {
  from {
    transform: translateX(-100px);
    opacity: 0.3;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes hide-icon-left {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100px);
    opacity: 0.3;
  }
}
@keyframes show-icon-rigt {
  from {
    transform: translateX(100px);
    opacity: 0.3;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes hide-icon-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100px);
    opacity: 0.3;
  }
}
@keyframes show-icon-top {
  from {
    transform: translateY(-100px);
    opacity: 0.3;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes hide-icon-top {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100px);
    opacity: 0.3;
  }
}
@keyframes show-icon-bottom {
  from {
    transform: translateY(100px);
    opacity: 0.3;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes hide-icon-bottm {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100px);
    opacity: 0.3;
  }
}
.es-enable-drag {
  position: fixed;
  width: auto;
  z-index: 9999;
  cursor: pointer;
  user-select: none;
  .es-enable-drag-enter-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 10px;
    cursor: move;
    line-height: 30px;
    text-align: center;
    .es-enable-drag-enter-icon {
      font-size: 28px;
    }
  }
  .es-enable-drag-small-icon-box {
    background-color: #fff;
    border: 1px solid $--color-primary;
    border-radius: 10px;
    .es-enable-drag-small-icon {
      display: flex;
      font-size: 12px;
      padding: 0 4px;
      &::before {
        content: attr(data-content);
        display: block;
        width: 30px;
        height: 16px;
        text-align: center;
        line-height: 16px;
        color: #fff;
        font-weight: bold;
        border-radius: 8px;
        background-color: $--color-primary;
        position: relative;
      }
      &.es-left,
      &.es-right {
        flex-direction: column;
        padding: 4px 0;
        text-align: center;
        &::before {
          width: 16px;
          height: 30px;
          line-height: 30px;
          top: -5px;
        }
      }
      &.es-top,
      &.es-bottom {
        line-height: 16px;
        &::before {
          left: -5px;
          text-align: center;
        }
      }
    }
    .es-enable-drag-small-tri {
      font-size: 14px;
      color: $--color-primary;
    }
  }
  .animation-transform {
    transition: all 0.2s;
  }
  .show-animation-left {
    animation: show-icon-left 0.2s forwards;
  }
  .hide-animation-left {
    animation: hide-icon-left 0.2s forwards;
  }
  .show-animation-right {
    animation: show-icon-right 0.2s forwards;
  }
  .hide-animation-right {
    animation: hide-icon-right 0.2s forwards;
  }
  .show-animation-top {
    animation: show-icon-top 0.2s forwards;
  }
  .hide-animation-top {
    animation: hide-icon-top 0.2s forwards;
  }
  .show-animation-bottom {
    animation: show-icon-bottom 0.2s forwards;
  }
  .hide-animation-bottom {
    animation: hide-icon-bottom 0.2s forwards;
  }
  .es-enable-drag-mask {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  }
}
