@import "../../variable.less";
@import "../../mixins/index.less";

@keyframes canvasBuffer {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.@{--css-prefix}-canvas {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  z-index: var(--zindex-common);
  &-box {
    .mixin-absolute-center(absolute);
    overflow: hidden;
    animation: buffer 0.3s;
  }
  &-content {
    border-radius: var(--border-radius-lg);
    background: var(--color-white);
  }
  &-contenth5 {
    padding: var(--spacing-h-lg);
    box-sizing: border-box;
  }
  &-icon {
    width: 100%;
    margin-bottom: var(--spacing-v-sm);
    .flex-justify(flex-end)
  }
  &-save {
    margin-top: var(--spacing-v-lg);
    .flex-center();
    width: 100%;

    &__button {
      margin-top: var(--spacing-v-sm);
      background: var(--color-primary);
    }
  }
  &.@{--css-prefix}-canvas-show {
    display: block;
  }
}

.@{--css-prefix}-canvas-overlay {
  display: none;
  &.@{--css-prefix}-canvas-overlay-show {
    display: block;
  }
}