.vue-modal-resizer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  background: $color-transparent;
  z-index: $zIndex-7;
  overflow: hidden;
  cursor: se-resize;
  &::after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    background: $color-transparent;
    border-bottom: 1rem solid #ddd;
    border-left: 1rem solid $color-transparent;
  }
  .vue-modal-resizer.clicked::after {
    border-bottom: 1rem solid #369be9;
  }
}

.vm {
  &--block-scroll {
    overflow: hidden;
    width: 100vw;
  }
  &--container {
    position: fixed;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: $zIndex-6;
  }
  &--overlay {
    position: fixed;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: $color-overlay-modal;
    opacity: $opacity-default;
  }
  &--container.scrollable {
    height: 100%;
    min-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .vm--modal {
      margin-bottom: 0.2rem;
    }
  }
  &--modal {
    box-sizing: border-box;
    position: relative;
    background-color: $color-bg-primary;
    background-image: $color-gradient-grey;
    border-radius: 0.6rem;
    overflow-x: hidden;
    overflow-y: auto;
  }
  &--top-right-slot {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
  }
}
.vm-transition {
  &--overlay-enter-active,
  &--overlay-leave-active {
    transition: all 50ms;
  }
  &--overlay-enter,
  &--overlay-leave-active {
    opacity: 0;
  }
  &--modal-enter-active,
  &--modal-leave-active {
    transition: all 400ms;
  }
  &--modal-enter,
  &--modal-leave-active {
    opacity: 0;
    transform: translateY(-2rem);
  }
  &--default-enter,
  &--default-leave-active {
    opacity: 0;
  }
}
.vm-transition .vm-transition--default-enter-active,
.vm-transition--default-leave-active {
  transition: all 2ms;
}

.vue-dialog {
  font-size: 1.4rem;
  div {
    box-sizing: border-box;
  }
  &-content {
    flex: 1 0 auto;
    width: 100%;
    padding: 1.4rem;
  }
  &-content-title {
    font-weight: 600;
    padding-bottom: 1.4rem;
  }
  &-buttons {
    display: flex;
    flex: 0 1 auto;
    width: 100%;
    border-top: 0.1rem solid #eee;
  }
  &-buttons-none {
    width: 100%;
    padding-bottom: 1.4rem;
  }
  &-button {
    font-size: inherit;
    background: transparent;
    padding: 0;
    margin: 0;
    border: 0;
    cursor: pointer;
    box-sizing: border-box;
    line-height: 4rem;
    height: 4rem;
    color: inherit;
    font: inherit;
    outline: none;
    &:hover {
      background: #f9f9f9;
    }
    &:active {
      background: #f3f3f3;
    }
    &:not(:first-of-type) {
      border-left: 0.1rem solid #eee;
    }
  }
}

// NO PADDING USAGE
.modal {
  box-shadow: none;
  &_top {
    margin: 3rem 0 0;
  }
  &_black {
    background-color: $color-black;
    background-image: none;
  }
}