.v-image-selector {
  text-align: center;

  &__holder {
    width: 7rem;
    height: 7rem;
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0 auto;

    @include breakpoint(mobile) {
      width: 5rem;
      height: 5rem;
    }
  }

  &__preview {
    background-size: cover;
    width: 100%;
    height: 100%;
    position: relative;
  }

  &__clear {
    margin-top: .5rem;
    cursor: pointer;
    color: $alert-color;
    text-decoration: underline;
    text-decoration-color: transparentize($alert-color, .5);
  }

  &--round {
    .v-image-selector__preview, .v-image-selector__holder {
      border-radius: 100%;
    }
  }
}

.eddbk-avatar-rounded {
  height: 3rem;
  width: 3rem;
  border-radius: 3rem;
}